更新使用 ng-options 生成的 select 的模型和 selected 选项

Question

不幸的是，我只是绕着圈子试图解决这个问题 - 任何帮助将不胜感激。

我想更新使用 ng-options 生成的 select 的模型和 selected 选项。

以下是选项的值：

var blahOptionValues = [
  {valueForModel: '1', optionText: 'a'},
  {valueForModel: '2', optionText: 'b'},
  {valueForModel: '3', optionText: 'c'},
]

这是我的观点：

<select ng-model="blahModel" ng-options="item.valueForModel as item.optionText for item in blahOptionValues"></select>

作为另一个事件的结果，我将如何使用相关值更新 "blahModel"？这也会更新视图中的 selected 值吗？

Answer 1

您需要 select 相同的引用才能在 select 中显示值。

也就是说，如果你想设置基于事件的blahModel，你需要做以下事情：

//Assume that the following code is in your event handler.
//Assuming here that you want to set the value  of the select to 'b'
$scope.blahModel = $scope.blahOptionValues[1].valueForModel

如果您直接将值设置为 2，它将不起作用，因为它不是同一个引用。您需要明确使用与 ng-repeat 中使用的迭代器相同的迭代器。此外，您的代码中似乎存在错误 - blahOptionValues 应该在范围内而不是局部变量。

Answer 2

参考 "As a result of another event, how would I update the "blahModel" 的相关值"=12=]

我正在扩展您的代码。我有一个文本框，您可以在其中输入值 1,2 或 3，然后单击设置按钮，select 值会更新。

我在 ng-options 中添加了 track by。

Html :-

<select ng-model="blahModel" ng-options="item.valueForModel as item.optionText for item in blahOptionValues track by item.valueForModel"></select>
<input type="text" data-ng-model="searchSelect"/>
<input type="button" data-ng-click="SetSelect()" value="Set"/>

Angular代码:-

$scope.SetSelect = function () { 
    $scope.blahModel={valueForModel:$scope.searchSelect};;
};

Answer 3

是的，它也会更新视图。请查看 plunker 中的演示：link: http://plnkr.co/edit/7XVrn7GmfKrJS7e4fvuH?p=preview`

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.blahOptionValues = [
      {valueForModel: '1', optionText: 'a'},
      {valueForModel: '2', optionText: 'b'},
      {valueForModel: '3', optionText: 'c'},
    ];
    
  $scope.blahModel = '2';  
  
  $scope.update = function(){
    
    $scope.blahModel = '1';
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">{{blahModel}}
    <select ng-model="blahModel" ng-options="item.valueForModel as item.optionText for item in blahOptionValues"></select>
    <button ng-click="update()" >update</button>
  </div>

`

更新使用 ng-options 生成的 select 的模型和 selected 选项

Update the model and selected option of a select that is generated using ng-options

angularjs

ng-options