AngularJS从外部访问作用域ng-repeat

AngularJS access scope from outside ng-repeat

本文关键字：ng-repeat 作用域 访问 从外部 AngularJS      更新时间：2023-09-26

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

恰好: 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']
    }
  ];
});

<h3>标签必须在locationAccordionCtrl的范围内。因此，将其放入<div ng-controller="locationAccordionCtrl">标签中。此外，您必须说{{locations.length}}而不是{{location.length}}(缺少"s")

问题不在于它在ng-repeat之外，而在于它在控制器之外。下面的代码应该可以工作:

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

把绑定放到控制器中:

<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>

<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>
相关文章：