Angular.js将CSS应用于ng-repeat中的一个元素

Question

我有以下html：

  <li ng-repeat="document in collection">
        <span ng-repeat="(key, value) in document.nestedDocument">
            <input type="text" ng-model="document.nestedDocument[key]"> 
        </span>
      <quick-datepicker ng-model="myDate"></quick-datepicker>
      <button ng-click="dateFunction($index)" class="btn btn-info">SetDate</button>
  </li>

现在我如何才能将CSS应用于仅点击索引的<quick-datepicker ng-model="myDate">？

e.g。我可以在控制器中运行：

   $scope.isActive = true;

并添加到我的'quick-datepicker'html：

ng-class="{true: 'active', false:'inactive'}[isActive]"

并有一些CSS类：

.active {
    color: red;
}

.inactive {
    color: black;
}

但是这会在ng-repeat中为所有 datepicker元素添加颜色。如何将仅应用于单击$ index的（表示“收集ng-repeat中的文档”中的索引）？

屏幕截图：

Answer 1

鉴于isActive位于每个document范围内，这应该足够了：

ng-class="{
    active: isActive,
    inactive: !isActive
}"

如果isActive在所有collection之间共享（即在更高的范围级别），则可以将isActive设置为当前document实例并检查等式而不是简单的布尔值标志：

在dateFunction函数中：

$scope.isActive = collection[index]

ng-class：

ng-class="{
    active: isActive === document,
    inactive: isActive !== document
}"