$index issue in Angular

Question

I am having issue with $index in angular.I have a ng-repeat inside which I am using $index to keep track of unique class. Here is my code:

    <div ng-repeat="style in styleArr">
       <div class="myclass{{ $index }}">
       </div>
    </div>

In angular controller I am appending a div inside myclass0,But not working. Here is my controller.

 myClass = angular.element('.myclass0');
 myClass.append('<div class="test">Hello World..<test>');

When I try to do this:

<div ng-repeat="style in styleArr">
    <div class="myclass0">
    </div>
 </div>

Its working fine.Any suggestion?

Dont do direct DOM manipulation in angular. Appending divs is jQuery-style, which is very contrary to the way angular is designed. Use data binding and templating. — LionC
– LionC, Commented Oct 8, 2015 at 12:30
The class should actually be evaluating correctly, but it is safer to use ng-class , however I think your issue is you're trying to append to elements like you would in jquery, this is not generally the angular way of going about this. My guess is the myClass you are setting is looking for the element before the repeat has run. You don't want to do DOM manipulations like that from the controller. What are you trying to achieve? — ajmajmajma
– ajmajmajma, Commented Oct 8, 2015 at 12:38

Kishor Vitekar · Accepted Answer · 2015-10-08 12:50:46Z

1

I think you want a unique classes for each div for applying a unique CSS. You can implement it by assigning a unique class or assigning a unique Id. For a Class, you need to use "ng-class" directive.

<div ng-repeat="style in styleArr">
       <div ng-class="myclass{{ $index }}">
       </div>
</div>

For a unique Id use :

<div ng-repeat="style in styleArr">
       <div id="style{{ $index }}">
       </div>
</div>

Best option is to use unique Id for performing a operation. If you want to assign only a styles then use Unique classes.

answered Oct 8, 2015 at 12:50

Kishor Vitekar

5555 silver badges12 bronze badges

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

Comments

Jesse · Accepted Answer · 2015-10-08 12:30:31Z

0

Use ng-class, it allows for expressions in the class name

<div ng-repeat="style in styleArr">
       <div ng-class="myclass{{ $index }}">
       </div>
</div>

More info on ng-class: https://docs.angularjs.org/api/ng/directive/ngClass

answered Oct 8, 2015 at 12:30

Jesse

1,2621 gold badge9 silver badges19 bronze badges

5 Comments

Rahul Over a year ago

No luck..I have also tried ng-class.I think ng-class is not a issue in my case.

ajmajmajma Over a year ago

@user5320720 the class is not your issue, the thinking you are using with the .element and .append parts is not aligned with how angular wants to work.

Rahul Over a year ago

@dfsq..If elements(myclass0, myclass0) is not available according to you.How can it appending when I hardcode the class name?

Rahul Over a year ago

@ajmajmajma when I pass the hardcoded value of class name its working on that case.

ajmajmajma Over a year ago

@user5320720 yes because you are not relying on a repeat to run, the point is, it is the wrong way of doing this in angular. If you maybe explain what you are trying to achieve, someone can definitely show you the correct way to do it in angular :). Like for example if you are just trying to append that div to the first item in the repeat you can use $first as someone has shown in an above answer.

Jelmer · Accepted Answer · 2015-10-08 12:33:44Z

0

Use "ng-class" instead of "class"

<div ng-repeat="style in styleArr">
   <div ng-class="myclass{{ $index }}">
   </div>
</div>

edited Oct 8, 2015 at 12:33

answered Oct 8, 2015 at 12:30

Jelmer

1,0193 gold badges11 silver badges24 bronze badges

Comments

Rafael Garcia · Accepted Answer · 2015-10-08 12:35:22Z

0

you have to change class for ng-class

answered Oct 8, 2015 at 12:35

Rafael Garcia

161 bronze badge

Comments

dfsq · Accepted Answer · 2015-10-08 12:37:20Z

You can't do it reliably the what you are trying to do it. You need to understand how digest cycle and compilation/rendering of templates in Angular works. Then you would understand that element with class myclass0, myclass1, etc. - are not available at the time yo are trying to fetch them from DOM. Again - this is the reason why you should never do any DOM manipulations in controllers.

You should either use custom directive i your case or existing Angular directives like ngIf/ngShow, etc.

For example:

<div ng-repeat="style in styleArr">
    <div class="myclass" ng-if="style.show">
        <div>Hello ...</div>
    </div>
</div>

and in controller

// show "Hello" in the first myclass
$scope.styles[0].show = true;

V31 · Accepted Answer · 2015-10-08 12:39:21Z

0

My advice would be not to have DOM manipulation inside controllers. That is what directive is used for. However in your case if you just want to append a div for the first iteration you can do something like this:

<div ng-repeat="style in styleArr">
       <div ng-show="$first" class="test">Hello World..</div>
 </div>

Collectives™ on Stack Overflow

$index issue in Angular

6 Answers 6

Comments

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related