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

I have the following html:

我有以下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>

Now how can I apply CSS to <quick-datepicker ng-model="myDate"> of only the index clicked?

现在我如何将CSS应用于仅被点击的索引的 ?

e.g. I could run in the controller:

例如我可以在控制器中运行:

   $scope.isActive = true;

and add to my 'quick-datepicker' html:

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

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

and have some CSS classes:

并有一些CSS类:

.active {
    color: red;
}

.inactive {
    color: black;
}

But this would color all datepicker elements inside ng-repeat. How to apply only to the one whose $index is clicked (meaning the index inside the "document in collection ng-repeat")?

但是这会为ng-repeat中的所有datepicker元素着色。如何仅应用于单击$ index的那个(意味着“收集ng-repeat中的文档”中的索引)?

Screenshot:

1 个解决方案

#1

Given that isActive is located on each document scope, this should suffice:

鉴于isActive位于每个文档范围,这应该足够:

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

If isActive is shared between all collection (i.e. on higher scope level), you can set isActive to current document instance and check for equation instead of simple boolean flag:

如果isActive在所有集合之间共享(即在更高的范围级别),则可以将isActive设置为当前文档实例并检查等式而不是简单的布尔标志:

In dateFunction function:

在dateFunction函数中:

$scope.isActive = collection[index]

And ng-class:

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