how to bind angularjs controller data to bootstrap popover
Question
In my angularJs app, i am using bootstrap popover and having problem of binding controller data to content of popover. below is my code.
<ul>
<li ng-repeat="rpt in obj.reports track by rpt.name">
{{rpt.name}}
<span class="glyphicon glyphicon-info-sign"
data-toggle="popover" data-trigger="hover"
title="Driver reports" data-content="rpt.info" popover>
</span>
</li>
</ul>
Please help me how to bind {{rpt.info}} to data-content of popover.
2 answers
solution1
0 2016-07-06 15:23:27
So for making bootstrap work with angular, you could use one of these awesome modules.
Angular Strap or Angular UI Boostrap
Angular Strap's modal:
http://mgcrea.github.io/angular-strap/#/modals
Angular UI's modal:
https://angular-ui.github.io/bootstrap/#/modal
solution2
0 2016-07-06 15:48:36
I would use UI Bootstrap ( https://angular-ui.github.io/bootstrap/#/top ) since it is an Angular app. Here's your code using UI Bootstrap:
var app = angular.module('popoverApp', ['ui.bootstrap']); app.controller('MainCtrl', function() { var vm = this; this.reports = [{ name: 'Report 1', info: 'this is report 1' }, { name: 'Report 2', info: 'this is report 2' }, { name: 'Report 3', info: 'this is report 3' }]; });
<!DOCTYPE html> <html ng-app="popoverApp"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl as obj"> <ul> <li ng-repeat="rpt in obj.reports track by rpt.name"> {{rpt.name}} <div class="glyphicon glyphicon-info-sign" uib-popover="{{rpt.info}}" popover-trigger="mouseenter" popover-title="Driver reports" popover-placement="right"> </div> </li> </ul> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.