Question

我有以下ng-repeat列表：

<div class="row msf-row" 
     ng-repeat="record in recordlist 
     people-popover>
       <div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem"> 
          <button class="btn btn-primary form-control msf-paxlist" 
                  rel="popover" 
                  data-content="<li ng-repeat='passanger in record.pax'>
                                   {{passanger.name}}
                                </li>" 
                  data-original-title="Passanger List">
              {{record.pax.length}} <i class="fa fa-user"></i>
          </button>
       </div>
</div>

我使用指令初始化popover：

.directive('peoplePopover', function() {
    return function(scope, element, attrs) {
        element.find("button[rel=popover]").popover({ placement: 'bottom', html: 'true'});
    };
})

问题是<li ng-repeat="pasanger in record.pax">{{pasanger.name}}</li>，不会显示。

如果我使用<li ng-repeat="record.pax">{{pax}}</li>，它将显示数组，但如果我尝试使用ng-repeat列出数组的对象，它将无法工作。

这就是数组（记录）的样子：

record in recordlist {
    date : "02/12/2014"
    time : "00.02.01"
    car : "369"
    pax: [
        {
        name : "Ben"
        chosen : true
        },
        {
        name : "Eric"
        chosen : true
        }
    ]
}

任何提示？

Answer 1

我遇到了类似的问题，我就这样解决了。

我将ng-repeat块包装在另一个指令中，并将该集合传递给该外部指令。

div class="row msf-row" 
     ng-repeat="record in recordlist 
     people-popover>
       <div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem"> 
          <button class="btn btn-primary form-control msf-paxlist" 
                  rel="popover" 
                  data-content="<new-directive records=record.pax></new-directive>" 
                  data-original-title="Passanger List">
              {{record.pax.length}} <i class="fa fa-user"></i>
          </button>
       </div>
</div>

在新指令中，您将拥有此代码。

<li ng-repeat='passanger in record.pax'>
         {{passanger.name}}
</li>

希望这有助于遇到类似问题的人。

ng-repeat嵌套在Popover中不起作用

1 个答案: