Question

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

ngRepeat在option-tag
ngChange select-tag

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

<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内部选项标记在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。

感谢。

Answer 1

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

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

＆＃13;

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);
  }
});

＆＃13;

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

＆＃13;

Answer 2

尝试使用ng-options代替ng-repeat，例如

＆＃13;

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

＆＃13;

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

Answer 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访问您的索引：）

从select-tag中的ng-change选项中获取$ index

4 个答案: