I've been searching the web and racking my brain but can't seem to find a solution to this. I need to make a popover inside of an ng-repeat, where the popover will also have an ng-repeat inside of it.
Here is the JSFiddle I have so far but the ng-repeat with "phone.friends" does not work:
http://jsfiddle.net/grzesir/Lq8ve/4/
HTML:
<div ng-app="AngularApp">
<div class="container" ng-controller="MainController">
<div ng-repeat="phone in phones">
{{phone.name}}
<a href="javascript: void(0);" class='repeatpopover' data-popover="true" data-html=true data-content="<div ng-repeat='friend in phone.friends'>{{friend.name}}</div>">hover here</a>
</div>
</div>
Javascript:
var angularApp = angular.module('AngularApp', []);
angularApp.controller('MainController', function ($scope) {
$scope.phones = [{
'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.',
'friends': [{
'name': 'John'
}, {
'name': 'Mike'
}]
}, {
'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.',
'friends': [{
'name': 'John 2'
}, {
'name': 'Mike 2'
}]
}, {
'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.',
'friends': [{
'name': 'Chris'
}, {
'name': 'Noah'
}]
}];
});
$(function () {
$(".repeatpopover").popover({
trigger: "hover"
});
});
I've updated your fiddle for solution using a filter.
Add:
angularApp.filter('friendsHTML', function() {
return function(input) {
var html = '';
for (idx in input) {
html += '<div>' + input[idx].name + '</div>';
}
return html;
};
});
And then in your template for the data-content
parameter just do data-content="{{ phone.friends | friendsHTML }}"
. This could probably be made more general/reusable somehow though.
This may be worth looking into as well. Hope that helps!
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