单击时更改 ng-class（嵌套 ng-repeat）

Question

这是我的 angular 代码..（描述我遇到的问题是按钮重复的嵌套 ng-repeat 是对所有 "jobs" 列出的行为（单击时） ..

    <div class="row" ng-repeat="job in jobs">
        <div class="btn-group btn-group-justified" role="group">
             <div class="btn-group" role="group" ng-repeat="status in job.statuscollection">
                   <button type="button" class="btn btn-default" ng-class="{ 'btn-info': $index == selectedIndex }" ng-click="itemClicked($index)">{{status.name}}</button>
             </div>
        </div>
    </div>

这是我的 js 代码..

    $scope.jobs = [
    {
        _id: new Date().toISOString(),
        statuscollection: [
            { name: "Off-Site"},
            { name: "Enroute" },
            { name: "On-Site" },
        ]
        docType: "job",
    },
    {
        _id: new Date().toISOString(),
        statuscollection: [
            { name: "Off-Site"},
            { name: "Enroute" },
            { name: "On-Site" },
        ]
        docType: "job",
    }];

这是我的 ng-click 函数..

    $scope.itemClicked = function ($index) {
         $scope.selectedIndex = $index;
         console.log($scope.jobs[$index]);
    }

我有不止一份工作，我在代码中只包含了一份工作以减少它的数量。但是当浏览器以正确的方式生成此数据时，单击 "job's" 按钮之一会对每个作业执行相同的操作。

意思是，如果我为一项工作单击按钮 "on-site"，它会为所有工作复制。我怎样才能做到只单击一个工作按钮就只为该工作工作，而不是全部？

Answer 1

使用$parent.$index而不是$index来引用外层的ng-repeated循环（作业循环，即）：

<button type="button" class="btn btn-default" ng-class="{ 'btn-info': $parent.index == selectedIndex }" ng-click="itemClicked($parent.$index)">{{status.name}}</button>

$index是内循环的索引。

$parent.$index是外循环的索引

Answer 2

跟踪多个 ngRepeats 索引的 proper Angular approach 是使用 ngInit 为每个 ngRepeat 实例创建别名 $index 的局部变量.通常不鼓励使用 $parent 获取其 $index 位置。

在下面的示例中，我们有两个 ngRepeats，因此有两个别名索引变量：outerIndex 和 innerIndex：

  <tbody ng-repeat="country in countries" ng-init="outerIndex = $index">
    <tr ng-repeat="city in country.cities" ng-init="innerIndex = $index">
      <td>{{city}}</td>
      <td>{{country.name}}</td>
      <td>({{outerIndex}}, {{innerIndex}})</td>
    </tr>
  </tbody>

笨蛋：http://plnkr.co/edit/VA1XWWrG3pghEcWli06F

最终编辑

在了解了问题背后的更多上下文之后，OP 在所选对象上设置 isActive 属性实际上更有意义，而不是尝试跟踪和匹配索引。也就是说，上述方法仍然有效并适用于跨多个 ngRepeats

的跟踪指数

 $scope.itemClicked = function (status, job) {
   if (status.isActive) {
     status.isActive = false;
   } else {
     angular.forEach(job.statuscollection, function(status) {
       status.isActive = false;
     });
     status.isActive = true;
   }
 }

更新的插件：http://plnkr.co/edit/v70fY30PjoTXCrhOPVZB

单击时更改 ng-class（嵌套 ng-repeat）

Changing ng-class when clicked (nested ng-repeat)

javascript

angularjs

class

ng-repeat

angularjs-ng-click

最终编辑