Angularjs: использование ng-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
  }

}]);

Заранее спасибо.


angularjs ng-class angularjs-controller angularjs-scope ng-repeat
person m3ta    schedule 17.02.2015    source источник
comment
у тебя было близко, попробуй ng-class="{'checked': isChecked($index)}"   -  person aarosil    schedule 18.02.2015
comment
Спасибо @aarosil за исправление синтаксиса. Хотя это не решает мою проблему. Как видите, в функции, которая там вызывается, ничего нет. Я пытаюсь понять, как это сделать.   -  person m3ta    schedule 18.02.2015
comment
Не могу точно сказать, что вы пытаетесь сделать, но, может быть, что-то вроде span.span >= $index сработает в этой функции?   -  person aarosil    schedule 19.02.2015
comment
@aarosil Я добавил больше пояснений в описание. Я пробовал что-то подобное, но не смог заставить его работать. Не могли бы вы быть более конкретными, учитывая детали и код? Дайте мне знать, если это все еще нечетко.   -  person m3ta    schedule 19.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно отслеживать индекс текущего шага и сравнивать его со значением $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;
  };

}]);

Не тестировал этот код, но общая идея должна работать.

person SteamDev    schedule 19.02.2015