Getting $index from option in ng-change inside select tag

Question

I see there are a lot of questions similar to this one, but I couldn't find any that requires exactly what I have:

ngRepeat inside option-tag
ngChange inside select-tag

I need to get the index of selected option. This is my code

<select data-placeholder="Choose" ng-model="pp.sif" name="myname" ng-change="onChangeSifra()">
    <option ng-repeat="item in sif.what track by $index" value="{{item.SIF}}">
        {{item.LABEL}}
    </option>
</select>

ngClick inside option-tag doesn't work on Chrome and IE, so that is not an option. ngOption (in select-tag) instead of ngRepeat (in option-tag) is not an option because sif.what is an array of objects; also, that is why I can't use indexOf function (ngModel has only part of this object).

Any ideas?

EDIT: Since a lot of you are telling me to switch to ngOption, let me make it more clear why this isn't an option. I iterate trough something like this:

$scope.sif.what = [
    {SIF: 1, LABEL: "label 1", SAVED: "save me 1"},
    {SIF: 2, LABEL: "label 2", SAVED: "save me 2"},
    {SIF: 3, LABEL: "label 3", SAVED: "save me 3"},
]

So in a combobox I have "label" as label, "sif" as value, ngModel is the value of "sif", but on ngChange I need the entire object, sif.what(index), or $index.

Thanks.

@SaurabhAgrawal index, just like item, is not in select scope, since I have ngRepeat inside option tag, and ngChange inside select tag. — akrelj, Feb 21 '17 at 07:15

score 1 · Accepted Answer · answered Feb 20 '17 at 15:28

I am not sure how will you be able to pass back the index of the selected item unless you put that as the value of the selected option.

Here is a way you can possibly do it.

var app = angular.module('app', []);

app.controller('ctrl', function($scope, $filter) {
  $scope.sif = {'what': [{'SIF':'A'},{'SIF':'B'},{'SIF':'C'}]};
  $scope.onChangeSifra = function(item){
     $scope.selectedItem = $filter('filter')($scope.sif.what, {SIF : $scope.pp.sif}, true)[0];
     $scope.selectedItemIndex = $scope.sif.what.indexOf($scope.selectedItem);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />

<body ng-app="app" ng-controller="ctrl">
  <div class="col-lg-12">
    <select data-placeholder="Choose" ng-model="pp.sif" name="sif" ng-change="onChangeSifra()">
      <option ng-repeat="item in sif.what track by $index" value="{{item.SIF}}">
          {{item.SIF}}
      </option>
    </select>
    
    <p>Selected : {{pp.sif}}</p>
    <p>Index : {{selectedItemIndex}}</p>    
  </div>
</body>

Wow, a brilliant solution using filters. I tought I was going to have to iterate trough array to find an index, but this is just perfect. Thank you! :) — akrelj, Feb 21 '17 at 09:09

score 0 · Answer 2 · answered Feb 20 '17 at 15:16

0

try to use ng-options instead of ng-repeat e.g.

<select data-placeholder="Choose" ng-model="pp.sif" name="sif" ng-change="onChangeSifra()" ng-options="{index: idx, item:item.SIF} as item.SIF for (idx, item) in sif.what">
</select>

answered Feb 20 '17 at 15:16

Vadym Kaptan

88
3

As I said, I can't use ngOptions. I usually use it, but in this case I can't since I have to read and iterate trough an object, show one part of the object as a label, the other one as value, and ng-model will probably have the third part. No way I can do that with ngOptions (as far as I know). I will edit my question so you can understand my problem better. – akrelj Feb 21 '17 at 07:21

score 0 · Answer 3 · answered Feb 20 '17 at 19:41

0

Observation : use ngOptions attribute instead of ng-repeat.

Use array.indexOf() method to find the index of selected item.

DEMO

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.sif = {
      "what": [
        {
          "SIF":1
        },
        {
          "SIF":2
        },
        {
          "SIF":3
        }
      ]
    };
  $scope.onChangeSifra = function(selectedItem) {
    console.log($scope.sif.what.indexOf(selectedItem));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select data-placeholder="Choose" ng-model="pplsif" name="sif" ng-change="onChangeSifra(pplsif)" ng-options="item.SIF for item in sif.what">
</select>
</div>

answered Feb 20 '17 at 19:41

Debug Diva

26,058
13
70
123

As I said, I can't use ngOptions. I usually use it, but in this case I can't since I have to read and iterate trough an object, show one part of the object as a label, the other one as value, and ng-model will probably have the third part. No way I can do that with ngOptions (as far as I know). Also, since I don't have an array, array.indexOf() function is of no value for me. – akrelj Feb 21 '17 at 07:18
But in your post `$scope.sif.what` is an array only.use the best practices in your code instead of using old one. – Debug Diva Feb 21 '17 at 08:03
It is an array of objects, but I don't have that entire object in the ngModel. Just part of that object. So array.indexOf() can't work. – akrelj Feb 21 '17 at 08:40

score 0 · Answer 4 · answered Dec 08 '17 at 09:02

You can try this login

<select ng-model="optIndex" ng-change="getIndex()">
<option ng-repeat="opt in opts" value={{$index}}></option>
<select>

$scope.getIndex = function(){console.log($scope.optIndex);}

Now you can access your index using this snnipet :)

Getting $index from option in ng-change inside select tag

4 Answers4

Linked