Set class value in Angularjs using repeat with multiple ng-if

Question

Using Angularjs, I need to compare the value of $index to $parent.$index in a nested ng-repeat and set the value of the class according to this result. This is what I am currently trying-

<td ng-repeat="d in vm.users track by d._id"
  ng-class="{showBottomLine : less, showSides : more, showBottomSideLine : equals }">
    <div ng-if="$index < $parent.$index" ng-class="showBottomLine">less</div><!--ng-model="less"-->
    <div ng-if="$index  > $parent.$index" ng-class="showSides">more</div>
    <div ng-if="$index === $parent.$index" ng-class="showBottomSideLine">equals</div>
</td>

tpsilva · Accepted Answer · 2016-04-11 16:11:38Z

1

The syntax for ng-class is as follows:

<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>

In your case

$parent.$index" ng-class="{'showSides': $index == $parent.index}">

edited Apr 11, 2016 at 16:11

answered Apr 11, 2016 at 15:00

tpsilva

1,4631 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

flurp Over a year ago

I am having trouble displaying my code correctly. I am checking the $parent.$index against the $index to see if it is greater than, less than, or equal. I am trying to set the class according to this value. I am trying to use 3 ng-if lines for testing the values. This test is working. It just isn't changing my class for me.

flurp Over a year ago

I just got my code up here. I was testing the ng-if statements to see if they worked by writing the words more, less, or equal. I need to check for all 3 values and assign one of three different classes based on the results.

tpsilva Over a year ago

<div ng-class="{'showBottomLine': ($index < $parent.$index), 'showSides': ($index > $parent.$index)}"></div>

tpsilva Over a year ago

Use the same div, changing the class accordingly to the condition.

flurp Over a year ago

It was using the parentheses that I was missing. Thanks for your quick help!!

Collectives™ on Stack Overflow

Set class value in Angularjs using repeat with multiple ng-if

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related