我有这个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个项目。因此，我们有2个项目的$ index = 1（在自己的父循环中建立索引），因此它们都获得了该类。因此，如何在select（）函数中仅引用单击项的范围？我需要一种具有“全局索引”（或诸如此类）的方法，使我可以仅引用其中一个作用域。我设法通过一个丑陋的技巧做到了这一点，在该技巧中，我将父级和子级索引（字符串）和ng-init连接起来，然后只是在子级中检查该变量，但我认为应该有更好的方法。
任何人？谢谢！
这是一个工作版本：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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句