AngularJS: How to get index value in ng-repeat?

Question

I am new is angularjs and i am trying to get the index value in ng-repeat means i want to set md-option value as index value my code is:

<md-input-container class="md-block" flex-gt-sm>
    <label>Filterable Columns</label>
        <md-select ng-model="visualization.filterable_columns" ng-change="drawFilters()" multiple="true" ng-init="index = 1">
            <md-option ng-repeat="filterable_column in vm.filterable_columns" value="{{index++}}">
                {{filterable_column.label}
            </md-option>
        </md-select>
</md-input-container>

can anyone help me about this?

Warning: Using $index may not be advisable, q.v. here.

Tim Biegeleisen
– Tim Biegeleisen

2016-12-15 06:37:52 +00:00
Commented Dec 15, 2016 at 6:37 — Tim Biegeleisen
– Tim Biegeleisen, Commented Dec 15, 2016 at 6:37
is there any another way..please !!

Rahul Sharma
– Rahul Sharma

2016-12-15 06:39:55 +00:00
Commented Dec 15, 2016 at 6:39 — Rahul Sharma
– Rahul Sharma, Commented Dec 15, 2016 at 6:39
$index issue may not be, here

yu yang Jian
– yu yang Jian

2024-08-01 11:09:06 +00:00
Commented Aug 1, 2024 at 11:09 — yu yang Jian
– yu yang Jian, Commented Aug 1, 2024 at 11:09

limsha · Accepted Answer · 2017-10-12 08:53:54Z

19

you can try like this:

<md-input-container class="md-block" flex-gt-sm>
    <label>Filterable Columns</label>
        <md-select ng-model="visualization.filterable_columns" ng-change="drawFilters()" multiple="true">
            <md-option ng-repeat="filterable_column in vm.filterable_columns" ng-value="{{$index}}">
                {{filterable_column.label}}
            </md-option>
        </md-select>
</md-input-container>

edited Oct 12, 2017 at 8:53

limsha

1286 bronze badges

answered Dec 15, 2016 at 6:37

sandeep

5395 silver badges16 bronze badges

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

Comments

CodeGems · Accepted Answer · 2017-10-12 03:43:50Z

11

Add track by $index to your ng-repeat

<md-input-container class="md-block" flex-gt-sm>
   <label>Filterable Columns</label>
   <md-select ng-model="visualization.filterable_columns" ng-change="drawFilters()" multiple="true">
      <md-option ng-repeat="filterable_column in vm.filterable_columns track by $index" ng-value="{{$index}}">
         {{filterable_column.label}}
      </md-option>
   </md-select>
</md-input-container>

answered Oct 12, 2017 at 3:43

CodeGems

5584 silver badges16 bronze badges

Comments

kemal akoğlu · Accepted Answer · 2016-12-15 06:49:17Z

Here is the helper function;

$scope.getIndexOf=function(arr, val, prop) {
      var l = arr.length,
        k = 0;
      for (k = 0; k < l; k = k + 1) {
        if (arr[k][prop] === val) {
          return k;
        }
      }
      return false;
    };

Example is;

$scope.Index=function(){
$scope.getIndexOf(vm.filterable_columns,"{{filterable_column.label}}","filterable_column.label")
};

You call this function in md-option's ng-change event. like this;

<md-select ng-model="visualization.filterable_columns" ng-change="drawFilters(); getIndexOf(vm.filterable_columns, {{filterable_column.label}}, filterable_column.label) " multiple="true" ng-init="index = 1">
           <md-option ng-repeat="filterable_column in vm.filterable_columns" value="{{index++}}">
                                 {{filterable_column.label}}
            </md-option>
      </md-select>

Collectives™ on Stack Overflow

AngularJS: How to get index value in ng-repeat?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related