Angularjs：使用 ng-class 将类添加到已完成的进度步骤答案

【问题标题】：Angularjs: Using ng-class to add a class to completed progress stepAngularjs：使用 ng-class 将类添加到已完成的进度步骤
【发布时间】：2015-02-17 22:44:16
【问题描述】：

我正在尝试向进度条上的已完成步骤指示器添加一个类，但不知道如何去做。当在页面上单击一个按钮并将用户带到下一页（下一步）时，一个步骤就完成了。因此，当发生这种情况时，我想在进度条上的上一步指示器中添加一个类，以指示它已完成。这是我希望它发生的地方：data-ng-class="{checked:isChecked($index)}"。该函数不一定要传递 $index，我只是在尝试一下。我可以为主动进度步骤执行此操作，而不是之前的步骤。我绞尽脑汁想弄清楚，但感觉我想多了。

<div data-ng-controller="ProgressBarCtrl">
  <div class="progress-bar">
    <ul>
      <li ng-repeat="step in steps" data-ng-class="{active:isActive('{[{ step.path }]}')}">
        <div class="progress-content">
          <span data-ng-class="{checked:isChecked($index)}" class="number-circle">{[{ step.step }]}</span>
          <span class="progress-copy">{[{ step.desc }]}</span>
        </div>
      </li>
    </ul>
  </div>
</div>


angular.module('progressBar', [])

.config(['$locationProvider', function($locationProvider){
  $locationProvider.html5Mode(true);
  }])

.controller("ProgressBarCtrl", ['$scope', '$location', function($scope, $location) {

  $scope.isActive = function(route) {
    // console.log('route ' + route);
    // console.log('path ' + $location.path());
    return route === $location.path();
  }

  $scope.steps = [
    { "step" : 1, "desc" : "Choose Plan", "path" : "/offers" },
    { "step" : 2, "desc" : "Customize", "path" : "/customize"},
    { "step" : 3, "desc" : "My Info", "path" : "/customer_details"},
    { "step" : 4, "desc" : "Installation"},
    { "step" : 5, "desc" : "Payment"}
  ]

  $scope.isChecked = function($index) {
    // Not sure what to do here or if this even the right approach
  }

}]);

提前致谢。

【问题讨论】：

你已经接近了，试试ng-class="{'checked': isChecked($index)}"
感谢@aarosil 的语法更正。但这并不能解决我的问题。如您所见，在那里调用的函数中没有任何内容。我正在尝试弄清楚如何做到这一点。
无法真正说出您想要做什么，但也许像 span.span >= $index 这样的东西可以在那个函数中工作？
@aarosil 我在描述中添加了更多说明。我确实尝试过类似的事情，但无法让它发挥作用。鉴于详细信息和代码，您能否更具体？让我知道它是否仍然模糊。

标签： angularjs angularjs-scope ng-repeat angularjs-controller ng-class

【解决方案1】：

您需要跟踪当前步骤的索引并将其与$index 值进行比较。

// ...

.controller("ProgressBarCtrl", ['$scope', '$location', function($scope, $location) {

  $scope.currentIndex = 0; // default to 0

  $scope.isActive = function(route) {
    // console.log('route ' + route);
    // console.log('path ' + $location.path());
    if(route === $location.path()){
      // set current index value here
      angular.forEach($scope.steps, function(step,i){
        if(route === step.path){
          $scope.currentIndex = i;
        }
      });
      return true;
    } else {
      return false;
    }
  };

  $scope.steps = [
    { "step" : 1, "desc" : "Choose Plan", "path" : "/offers" },
    { "step" : 2, "desc" : "Customize", "path" : "/customize"},
    { "step" : 3, "desc" : "My Info", "path" : "/customer_details"},
    { "step" : 4, "desc" : "Installation"},
    { "step" : 5, "desc" : "Payment"}
  ];

  $scope.isChecked = function($index) {
    return $index < $scope.currentIndex;
  };

}]);

尚未测试此代码，但总体思路应该可行。

【讨论】：