从选择标签内的 ng-change 中的选项获取 $index答案

【问题标题】：Getting $index from option in ng-change inside select tag从选择标签内的 ng-change 中的选项获取 $index
【发布时间】：2017-02-20 15:00:31
【问题描述】：

我看到有很多类似的问题，但我找不到任何需要我所拥有的东西：

ngRepeat 在选项标签内
选择标签内的ngChange

我需要获取所选选项的索引。这是我的代码

<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 在 Chrome 和 IE 上不起作用，所以这不是一个选项。 ngOption（在 select-tag 中）而不是 ngRepeat（在 option-tag 中）不是一个选项，因为 sif.what 是一个对象数组；另外，这就是为什么我不能使用 indexOf 函数（ngModel 只有这个对象的一部分）。

有什么想法吗？

编辑：由于你们中的很多人都告诉我切换到 ngOption，让我更清楚地说明为什么这不是一个选项。我通过这样的方式迭代：

$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"},
]

所以在组合框中我有“label”作为标签，“sif”作为值，ngModel 是“sif”的值，但在 ngChange 上我需要整个对象，sif.what(index) 或 $index。

谢谢。

【问题讨论】：

你试过ng-change="onChangeSifra($index)"???
@SaurabhAgrawal 索引，就像项目一样，不在选择范围内，因为我在选项标签内有 ngRepeat，在选择标签内有 ngChange。

标签： javascript angularjs drop-down-menu

【解决方案1】：

我不确定您将如何传回所选项目的索引，除非您将其作为所选选项的值。

这是一种你可以做到的方法。

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】：

尝试使用 ng-options 而不是 ng-repeat，例如

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

【讨论】：

正如我所说，我不能使用 ngOptions。我通常使用它，但在这种情况下我不能，因为我必须阅读和遍历一个对象，将对象的一部分显示为标签，另一部分显示为值，而 ng-model 可能会有第三部分.我无法用 ngOptions 做到这一点（据我所知）。我将编辑我的问题，以便您更好地理解我的问题。

【解决方案3】：

观察：使用ngOptions属性代替ng-repeat。

使用array.indexOf()方法查找选中项的索引。

演示

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>

【讨论】：

正如我所说，我不能使用 ngOptions。我通常使用它，但在这种情况下我不能，因为我必须阅读和遍历一个对象，将对象的一部分显示为标签，另一部分显示为值，而 ng-model 可能会有第三部分.我无法用 ngOptions 做到这一点（据我所知）。另外，由于我没有数组，因此 array.indexOf() 函数对我来说毫无价值。
但是在你的帖子中$scope.sif.what 只是一个数组。在你的代码中使用最佳实践而不是使用旧的。
它是一个对象数组，但我在 ngModel 中没有整个对象。只是该对象的一部分。所以 array.indexOf() 不能工作。

【解决方案4】：

你可以试试这个登录

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

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

现在您可以使用这个 snnipet 访问您的索引 :)

【讨论】：