Angularjs：使用 ng-class 添加一个 class 到已完成的进度步骤

Question

我正在尝试将 class 添加到进度条上的已完成步骤指示器，但不知道如何操作。单击页面上的按钮并将用户带到下一页（下一步）时，一个步骤就完成了。因此，当发生这种情况时，我想在进度条上的上一步指示器中添加一个 class 以指示它已完成。这是我希望它发生的地方：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
  }

}]);

提前致谢。

Answer 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;
  };

}]);

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

Angularjs：使用 ng-class 添加一个 class 到已完成的进度步骤

Angularjs: Using ng-class to add a class to completed progress step

angularjs

ng-repeat

angularjs-scope

angularjs-controller

ng-class