AngularJS 使用 ng-options 从 JSON 模型设置默认 <select> 值

Question

我有一个包含数百个 select 元素的表单。当用户保存表单时，我正在保存 JSON 并且当他们重新加载它时使用 JS 代理将其拉回。我正在寻找一种好的/干净的方法来根据 JSON 中的值设置选项值。最好不要为其中的每一个枚举数组，并根据与值匹配的索引进行设置。

jsfiddle

模板：

<div ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="jsModel.selVal"ng-options="myVal.value for myVal in myValArr"/>
</div>

app.js:

var myApp = angular.module('myApp',[]);

function myCtrl($scope) {
  $scope.myValArr = [{ value: 'Yes' }, { value: 'No' }]; 
  $scope.jsModel = ({ selVal: 'Yes' }); // Returned from proxy call
}

Answer 1

Demo

这里您需要做的就是使用 ng-options 它应该使 selected 对象格式与默认格式相匹配。

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <select ng-model="jsModel.selVal" ng-options="myVal.value as myVal.value for myVal in myValArr"/>
</div>

检查上面的 ng-options template.For 更多详细信息请参阅 angular ng-options.

的文档

你的错误：你的 select 元素正在 ng-model 中设置整个对象，默认情况下你试图只设置你的 property.So 的值两者都不匹配。希望您理解或告诉我。

Answer 2

考虑到你的范围，我想这样的事情应该可行：

HTML

<select ng-model="jsModel.selVal">
    <option ng-repeat="val in myValArr" value="{{val.value}}">{{val.value}}</option>
</select>

有关更高级的用例，请查看 ngOptions in combination with the select directive

AngularJS 使用 ng-options 从 JSON 模型设置默认 <select> 值

AngularJS set default <select> value from JSON model with ng-options

html-select

angularjs

ng-options

angularjs-ng-options