将类添加到指令中的 ng-repeat 中的上一个项目答案

【问题标题】：Add class to previous Item in ng-repeat in Directive将类添加到指令中的 ng-repeat 中的上一个项目
【发布时间】：2014-11-21 14:30:56
【问题描述】：

这是一个使用 ng-repeat 和指令的可重复使用进度条的示例。

Plunker

因为我有类 .progressBar__isActive 敌人当前页面或索引值。我想将 progressBar__isComplete 类添加到所有先前的列表项中。在代码中我有

 data-my-progress-bar data-currentPage="0" data-currentPageStyle="progressBar__isActive

这将为当前索引项添加类。但假设我有 data-currentPage="2"。我想在最后两个列表项中添加 progressBar__isComplete 类。

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

将ng-class的内容替换为：

ng-class="{ {{cssActivePage}}: $index == indexActivePage, progressBar__isComplete : $index < indexActivePage}"

这可行，但您可能想让它更类似于 {{cssActivePage}}

【讨论】：

【解决方案2】：

试试这个。您需要使用<= 而不是=。

HTML

<div data-my-progress-bar data-currentPage="2" data-currentPageStyle="progressBar__isActive" data-pages="['Step 1','Step 2','Step 3','Step 4']">
  </div>

HTML 进度条

<li ng-repeat="page in allPages" ng-class="{ 'progressBar__isActive': $index == indexActivePage,'progressBar__isComplete' : $index < indexActivePage}">
        {{page}}
      </li>

Updated Code

【讨论】：

我不想在以前的列表项中添加相同的类名。
按照 Walter 的建议，您可以在 ng-class 中添加多个 diff 类，但您需要将其包裹在单引号或双引号中以使其工作。
@JayShukla 我看到它在没有引号的情况下也可以工作。但严格来说你可能是对的