Question

不幸的是，我只是围着圈子试图解决这个问题 - 任何帮助都会非常感激。

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

以下是选项的值：

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”？这也会更新视图中的选定值吗？

Answer 1

您需要选择相同的参考，以便在选择中显示一个值。

也就是说，如果您希望根据事件设置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

参考“作为另一个事件的结果，我将如何使用相关值更新”blahModel“

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

我在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 Code： -

$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生成的选择的模型和选定选项

3 个答案: