Menu
I have a countries list and I am populating those using ng-repeat, everything is working fine. Also, I am trying to show some other details inside each country by using the bootstrap popover and it doesn't seem to work so can someone please help me?
Html Code:
<body ng-app="app" ng-controller="my_controller">
<div class="span3 projectCard" ng-repeat="country in all_countries">
<div class="projectCardHeight">
<button class="btn close cardClose" ng-click="deleteCountry(country.id)">×</button>
<div class="cardHeader">Country</div>
<div class="cardBody">{{country.id}}</div>
<div class="cardBody">{{country.title}}</div>
<div class="cardBody"><a href="#" id="pop{{country.id}}" class="btn btn-primary" rel="popover" data-content="This is the <b>body</b> of Popover" data-original-title="Creativity Tuts">pop</a></div>
</div>
</div>
</body>
Javascript Code:
var app = angular.module("app", []);
app.controller('my_controller', function($scope) {
$scope.all_countries = [
{"id":28,"title":"Sweden"},
{"id":56,"title":"USA"},
{"id":89,"title":"England"}];
});
function deleteCountry(id)
{
alert("Do something");
}
$(document).ready(function () {
$("a[rel=popover]")
.popover({ placement: 'bottom', html: 'true' })
.click(function (e) {
e.preventDefault();
});
});
Please refer to this JsFiddle
535
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Tip: Plugins can be included individually (using Bootstrap's individual "popover. js" file), or all at once (using "bootstrap.
Demo: http://jsfiddle.net/5ww8e/1/
Create a new directive called bs-popover and apply it together with ng-repeat. Trigger popover method inside bs-popover directive.
Also your js file loading order is wrong, you should load jquery before bootstrap.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
