Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ngRepeat Inside of Bootstrap Popover

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"
    });
});
like image 450
Rob Avatar asked Jun 11 '14 18:06

Rob


1 Answers

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!

like image 55
jeffff Avatar answered Sep 29 '22 09:09

jeffff