CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
future
future

Reputation: 352

Add class to previous Item in ng-repeat in Directive

Here is an example of re-usable progress-bar which uses ng-repeat and directive.

Plunker

As i have class .progressBar__isActive foe the current page or index value. I want to add progressBar__isComplete class to all the previous list item. In Code i have 

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

Which will add class to the current index item. But suppose i have data-currentPage="2". I would like to add progressBar__isComplete class to the last two list items.

Upvotes: 0

Views: 264

Answers (2)

Jay Shukla
Jay Shukla

Reputation: 5826

Try this. You need to use <= instead of =.

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

Upvotes: 0

Walter Brand
Walter Brand

Reputation: 689

replace the content of ng-class with:

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

That works, but you probably want to make it more similar to {{cssActivePage}}

Upvotes: 1

Related Questions