ngRepeat内部的Bootstrap Popover

Question

我一直在网上搜索并绞尽脑汁但似乎无法找到解决方案.我需要在一个ng-repeat内部制作一个popover,其中popover也会在其中有一个ng-repeat.

这是我到目前为止的JSFiddle,但是带有"phone.friends"的ng-repeat不起作用:

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"
    });
});

Answer 1

我已经使用过滤器更新了您的小提琴解决方案。

添加：

angularApp.filter('friendsHTML', function() {
  return function(input) {
      var html = '';
      for (idx in input) {
          html += '<div>' + input[idx].name + '</div>';
      }
      return html;
  };
});

然后在参数模板中data-content执行data-content="{{ phone.friends | friendsHTML }}". 不过，这可能会以某种方式变得更加通用/可重用。

这可能也值得研究。希望有帮助！