Question

以下是使用ng-repeat和指令的可重复使用进度条的示例。

因为我有类.progressBar__isActive foe当前页面或索引值。我想将progressBar__isComplete类添加到以前的所有列表项。在Code i中有

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

这会将类添加到当前索引项。但假设我有data-currentPage =“2”。我想将progressBar__isComplete类添加到最后两个列表项。

Answer 1

用以下内容替换ng-class的内容：

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

这样可行，但你可能想让它更像{{cssActivePage}}

Answer 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 ProgressBar

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

Updated Code

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

2 个答案: