将动态数据从AngularJS显示到Twitter Bootstrap Popover

Question

我试图通过AngularUI passthrough使用Bootstrap Popover来处理AngularJS中的动态绑定数据.在我的小提琴中,我无法动态显示办公地点的标题和每个办公室的人员名单:http://jsfiddle.net/stevenng/wmJtr/3/

Answer 1

你可以做到这一点的方法之一是只引用office在ui-options像这样的小提琴:

<div ng-repeat="office in offices">
  <a href="" ui-jq="popover" ui-options="{title:office.location, content:office.people.join(',')}">Test Popover - {{office.location}}</a>    
</div>    

另一种方法是ui-options通过一个函数生成一个函数,将当前项传入其中,就像这个小提琴一样.

使用这个html代码段:

<div ng-repeat="office in offices">
  <a href="" ui-jq="popover" ui-options="popoverOptions(office)">Test Popover - {{office.location}}</a>    
</div>

而这个控制器代码:

$scope.offices = [
    {location:'Europe', people:['andy','gloopy']},
    {location:'USA', people:['shaun','teri']},
    {location:'Asia', people:['ryu','bison']}];

$scope.popoverOptions = function(office){
    return { title: office.location,
             content: office.people.join(',') };
}