Question

我想显示在ng-repeat中重复的项目数，但是如何从ng-repeat外部访问它？

Plunker ：http://plnkr.co/edit/SYqb8h9k81SlVY3Yzhgx

HTML：

<h3>Number of locations is: {{location.length}}</h3>

<div ng-controller="locationAccordionCtrl">
  <div ng-repeat="location in locations" on-finish-render>

    {{location.siteName}}

    <ul>
        <li ng-repeat="listOfLocations in location.locationsList track by $index">
            {{listOfLocations}}
        </li>
    </ul>

  </div>
</div>

JS：

var App = angular.module('App', []);

App.controller('locationAccordionCtrl', function ($scope) {

  $scope.locations = [
    {
      "siteName":"First Location",
      "locationsList":['First Location 1', 'First Location 2', 'First Location 3']
    },
    {
      "siteName":"Second Location",
      "locationsList":['Second Location 1', 'Second Location 2', 'Second Location 3']
    },
    {
      "siteName":"Third Location",
      "locationsList":['Third Location 1', 'Third Location 2', 'Third Location 3']
    }
  ];

});

Answer 1

<h3>代码必须位于locationAccordionCtrl的范围内。所以，把它放在<div ng-controller="locationAccordionCtrl">标签内。此外，您必须说{{locations.length}}而不是{{location.length}}（缺少“s”）

Answer 2

问题不在于它在ng-repeat之外，而在于它在你的控制器之外。以下应该有效：

<div ng-controller="locationAccordionCtrl">
<h3>Number of locations is: {{locations.length}}</h3>
[...]

Answer 3

将绑定放在控制器中：

<div ng-controller="locationAccordionCtrl">
  <h3>Number of locations is: {{locations.length}}</h3>
  <div ng-repeat="location in locations" on-finish-render>

    {{location.siteName}}

    <ul>
        <li ng-repeat="listOfLocations in location.locationsList track by $index">
            {{listOfLocations}}
        </li>
    </ul>

  </div>
</div>

Answer 4

<div ng-controller="locationAccordionCtrl">

<h3>Number of locations is: {{locations.length}}</h3>

<div ng-repeat="location in locations" on-finish-render>

{{location.siteName}} ({{location.locationsList.length}})

<ul>
    <li ng-repeat="listOfLocations in location.locationsList track by $index">
        {{listOfLocations}}
    </li>
</ul>

</div>
</div>

AngularJS访问范围来自外部ng-repeat

4 个答案: