CODEWITHSUNDEEP
javascriptangularjscontroller
Rahul
Rahul

Reputation: 450

$index issue in Angular

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?

Upvotes: 1

Views: 110

Answers (6)

Kishor Vitekar
Kishor Vitekar

Reputation: 535

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.

Upvotes: 1

V31
V31

Reputation: 7666

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>

More on ng-repeat and $first

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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;

Upvotes: 0

Rafael Garcia
Rafael Garcia

Reputation: 16

you have to change class for ng-class

Upvotes: 0

Jelmer
Jelmer

Reputation: 989

Use "ng-class" instead of "class"

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

Upvotes: 0

Jesse
Jesse

Reputation: 1262

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

Upvotes: 0

Related Questions