Question

我在视图中有以下内容

<div>
    <select ng-model="obj.arr[otherObj.variable]" ng-change="otherObj.variable=SOMETHING">
        <option ng-repeat="label in obj.arrs">{{label}}</option>
    </select>
</div>

如果没有ng-change属性，当otherObj.variable是obj.arr的索引之一时，此代码会执行我想要的操作 - 它会在列表中选择正确的项目。

除此之外，我想要的是将otherObj.variable设置为更改下拉变量时拾取的数组项的索引。因此，如果选择下拉列表中的第二个值，则otherObj.variable应设置为1.我尝试使用

执行此操作

ng-change="otherObj.variable=SOMETHING"

问题是，我不知道SOMETHING应该是什么。我这样做了吗？

修改

我的要求是

默认情况下，在下拉列表中选择顶部选项
根据otherObj.variable的值选择数组中的相应项（这由一些外部代码设置，所以如果我来到具有此值集的页面，那么我希望选择正确的选项）
如果更改下拉列表中的值，请确保更新otherObj.variable。

Answer 1

angular.module('selects.demo', [])
.controller('SelectCtrl', function($scope){
  $scope.values = [{
    id: 1,
    label: 'aLabel',
  }, {
    id: 2,
    label: 'bLabel',
  }];
  
  $scope.selectedval = $scope.values[0];
});

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="selects.demo">
  <div ng-controller="SelectCtrl">
    <p>Using ngOptions without select as:</p>
    <select ng-model="selectedval" ng-options="value.label for value in values"></select>
    <p>{{selectedval}}</p>
    
    <p>Using ngOptions with select as statement: (this will return just the id in the model)</p>
    <select ng-model="selectedval2" ng-options="value.id as value.label for value in values"></select>
    <p>{{selectedval2}}</p>
  </div>
</div>

很抱歉，如果我的评论有点神秘。像其他表单元素一样的Select元素实际上是AngularJS中的指令，所以它们会自动为你做很多事情。您不需要使用ngChang e来填充与select元素关联的ngModel。 AngularJS将为您处理。

此外，您可以在select元素上使用ngOptions代替ngRepeat，以便在选项上自动生成值。

假设您有一个具有值的对象：

$scope.values = [{
  id: 1,
  label: 'aLabel',
}, {
  id: 2,
  label: 'bLabel',
}];

你会写：

<select ng-model="selectedval" ng-options="value.label for value in values"></select>

现在你的ngModel将被绑定到所选元素。它将使用所选对象的值进行设置。如果您将{{selectedval.id}}添加到视图中，它将显示所选元素的ID。

如果要将值设置为第一项，请在控制器中添加：

$scope.selectedval = $scope.values[0];

如果要根据所选值更新$ scope.values上的某些属性，可以使用以下内容：

$scope.addActiveProp = function() {
  var selected = $scope.values.filter(function(e) { return e == $scope.selectedval; });
  selected.active = true;
}

然后在select上运行ngChange中的addActiveProp fn。

Answer 2

请试用以下代码

<select ng-model="obj.arr[otherObj.variable]" ng-change="otherObj.variable=key" ng-options="key as value for (key , value) in obj.arrs"></select>

Angular：获取下拉项的索引

2 个答案: