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