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类 - 这有效;在这个例子中，我有2个组，一个有2个项目，另一个有1个项目;所以我们有两个$ index = 1的项目（在他们自己的父循环中索引），因此他们都得到了这个类。那么，如何在select（）函数中仅引用被单击项的范围？我需要一种方法来获得一个“全局索引”（或其他东西），它允许我只引用其中一个范围。我设法用一个丑陋的黑客来连接父级和子级索引（一个字符串）和ng-init然后只检查孩子中的变量，但我认为应该有一个更好的方法。

任何？谢谢！

Answer 1

以下是工作版本：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 2

您可以使用

{{$parent.$index}}

访问外部ng-repeat

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如何从父控制器中引用子范围？

3 个答案: