AngularJS 嵌套的 ng-repeat 如何从父控制器中引用子作用域？

Question

我有这个template.html

<style>
.sel{ border:5px solid red; }
</style>
<div class="parent-loop" ng-repeat="(datekey,group) in grouped">
    <div class="child-loop" ng-repeat="event in group" side="right">
        <div ng-class="{sel: $index == selected}">
           <label class="date">{{datekey}}</label>
           <button ng-click="$parent.select($index)" class="bt-select">select</button>
        </div>
    </div>
</div>

和这个controller.js

$scope.events = [{id:event1-date1, startDate:12/3/16},{id:event2-date1, startDate:12/3/16},{id:event1-date2, startDate:22/4/16}];

// this is the result of $scope.events.reduce(...) 
$scope.grouped = {
    '12/3/16':[{id:event1-date1, startDate:12/3/16},'12/3/16':{id:event2-date1, startDate:12/3/16}],
    '22/4/16':[{id:event1-date2, startDate:22/4/16}]
};

// this is called from within an item inside the child loop
$scope.select = function(index){
    $scope.selected = index;
}

注意：在真实的应用程序中，$parent 实际上被称为其他名称，但我在此示例中进行了简化；该按钮正在工作并调用控制器中的函数，所以不要介意 $parent.select($index).

我的问题是：我想单击其中一个项目的 bt-select 按钮并应用 .sel class - 这有效；在这个例子中，我有 2 个组，一个有 2 个项目，另一个有 1 个项目；所以我们有 2 个 $index=1 的项目（在它们自己的父循环中索引），因此它们都得到 class。那么，我如何才能在 select() 函数中仅引用被单击项目的范围？我需要一种方法来获得 "global index"（或其他东西），使我可以仅引用其中一个范围。我设法用一个丑陋的 hack 来做到这一点，我将父索引和子索引（一个字符串）和 ng-init 连接起来，然后只检查子变量中的那个变量，但我认为应该有更好的方法。

有人吗？谢谢！

Answer 1

您可以使用

{{$parent.$index}}

访问外部 ng-repeat

Answer 2

这是一个工作版本：http://jsfiddle.net/aLdxg715/

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.events = [
      {id:'event1-date1', startDate:'12/3/16'},
      {id:'event2-date1', startDate:'12/3/16'},
      {id:'event1-date2', startDate:'22/4/16'}
    ];

    $scope.grouped = {
        '12/3/16':[{id:'event1-date1', startDate:'12/3/16'},{id:'event2-date1', startDate:'12/3/16'}],
        '22/4/16':[{id:'event1-date2', startDate:'22/4/16'}]
    };

    $scope.select = function(index,groupIndex){
        $scope.selected = index;
        $scope.selectedGroup = groupIndex;
    }
}

.sel{ border:5px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <div class="parent-loop" ng-repeat="(datekey,group) in grouped">
    <div class="child-loop" ng-repeat="event in group" side="right">
        <div ng-class="{sel: ($index == selected && datekey == selectedGroup)}">
           <label class="date">{{datekey}}</label>
           <button ng-click="select($index,datekey)" class="bt-select">select</button>
        </div>
    </div>
  </div>
</div>
</div>

Answer 3

我最终在外部 ng-repeat 上使用 ng-init，然后在内部 ng-repeat 中检查 2 个条件，如下所示：

<div class="parent-loop" ng-repeat="(datekey,group) in grouped" ng-init="outerIndex=$index">
    <div class="child-loop" ng-repeat="event in group" side="right">
        <div ng-class="{sel: outerIndex == parent && $index == child}">
           <label class="date">{{datekey}}</label>
           <button ng-click="$parent.select(outerIndex, $index)" class="bt-select">select</button>
        </div>
    </div>
</div>

然后在我的控制器中：

$scope.select = function(parentIndex,childIndex){
    $scope.parent = parentIndex;
    $scope.child = childIndex;
}

AngularJS 嵌套的 ng-repeat 如何从父控制器中引用子作用域？

AngularJS nested ng-repeat how do I reference a child scope from within the parent controller?

nested

angularjs

ng-repeat