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

问题

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.

回答1:

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>

回答2:

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>

回答3:

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>

回答4:

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 :)

来源：https://stackoverflow.com/questions/42347812/getting-index-from-option-in-ng-change-inside-select-tag

标签

javascript

angularjs

drop-down-menu