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

Posted 2023-03-15

【中文标题】更新使用 ng-options 生成的选择的模型和选定选项

【英文标题】：Update the model and selected option of a select that is generated using ng-options

【发布时间】：2015-07-27 12:14:42

【问题描述】：

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

我想。

以下是选项的值：

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

【问题讨论】：

您的选择应该更新。如果没有，您可能会在不同的范围内更改另一个 bladModel。您还应该包含更改 blahModel 的“另一个事件”的代码。

感谢@Sander_P 的回复 - 没有发生范围冲突 - 我认为该事件对我的示例来说是多余的，因为它只是从视图调用的方法，没有任何问题.

【参考方案1】：

是的，它也会更新视图。 请查看 plunker 中的演示：链接：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>

`

【讨论】：

谢谢@Vidyadhar - 我确定这是我尝试的第一件事，然后在它不起作用时开始转圈 - 无论如何，它现在正在工作，非常感谢:)

【参考方案2】：

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

也就是说，如果你想根据一个事件来设置 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 应该在范围内，而不是作为局部变量。

【讨论】：

感谢@callmekatootie 的回复。该模型现在正在更新，但选择本身没有更新 - 我尝试将其包装在 $scope.$apply 中，但这不起作用。我实际上使用的是“控制器作为”语法而不是使用 $scope - 我没有在我的示例中包含它，但它在我的真实代码中。

select does not get updated - 这是什么意思？如果模型更新了，它应该会反映在视图中吗？

视图中的选择元素 - 你会这么认为，但事实并非如此。

然后尝试使用对象而不是变量 - myObject.blahModel

那么你做错了你没有描述的其他事情。如果您看到文档here，您可以看到上述解决方案的工作原理与页面底部文档中显示的示例一样。

【参考方案3】：

参考“由于另一个事件，我将如何使用相关值更新“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"/>

角度代码：-

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

【讨论】：

Jay 如果它对你有用.. 你可以随时投票:)