angularjs - 使用 JS 对象设置选择元素选项值
Posted
技术标签:
【中文标题】angularjs - 使用 JS 对象设置选择元素选项值【英文标题】：angularjs - setting select element option value with JS object 【发布时间】：2017-12-31 03:31:33 【问题描述】：我是 AngularJS 的新手，所以请多多包涵。
以下是我尝试在select 元素中绑定的 JSON 字符串：
[
"Name":"Value 1","ID":1,
"Name":"Value 2","ID":2,
"Name":"Value 3","ID":3,
"Name":"Value 4","ID":4
]
以下是相同的JS对象：
function NameValue(nameValue)
var self = this;
self.ID = nameValue.ID;
self.Name= nameValue.Name;
我正在解析上面的 JSON 字符串，循环遍历对象并使用上面的 JS 对象将项目推送到数组中，例如：
angular.forEach(angular.fromJson(jsonString), function (value, key)
$scope.Values.push(new NameValue(value));
);
以下是我的 select 与 agularjs 绑定：
<select ng-model="SelectedName" ng-options="x.Name for x in Values">/select>
当我在select 元素中选择一个值时，整个NameValue 对象被设置到SelectedName 属性中，这就是我想要做的。
现在，当我尝试动态设置 SelectedName 属性时，没有选择该值，并且在 select 元素中添加了一个空的 option 元素。我使用SelectedName 来检查动态设置时的值以及当我在select 元素中手动选择相同的值并且两者都是"ID":2,"Name":"DAO" 时完全相同。我在这里做错了什么？
【问题讨论】：
你是否在ng-view指令中初始化了SelectedName？
【参考方案1】：
首先 - 你应该在 $scope 中初始化 SelectName。
接下来你可以使用：
ng-options="x.id as x.name for x in values"
您能否在模板中显示 values 并且看起来不错？当数据被推入价值时，也许你有重绘模板的问题。也检查这种方式。
【讨论】：
【参考方案2】：这是一个有效的 sn-p。我猜您没有将 Values 定义为数组，在推送任何内容之前您必须将变量定义为数组。
var app = angular.module('myApp', []);
function NameValue(nameValue)
var self = this;
self.ID = nameValue.ID;
self.Name = nameValue.Name;
app.controller('myCtrl', function($scope)
$scope.Values = [];
$scope.jsonString = [
"Name": "Value 1",
"ID": 1
,
"Name": "Value 2",
"ID": 2
,
"Name": "Value 3",
"ID": 3
,
"Name": "Value 4",
"ID": 4
];
angular.forEach(angular.fromJson( $scope.jsonString), function (value, key)
$scope.Values.push(new NameValue(value));
);
console.log($scope.Values);
);<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="SelectedName" ng-options="x.Name for x in Values">/select>
</div>
</body>
</html>【讨论】：
【参考方案3】：我遇到了同样的问题，我找到了解决方案：
不要使用ng-options，而是使用<option> 标签
<select ng-model="..."> <option ng-repeat="..."> ... </option></select>
【讨论】：
【参考方案4】：ng-options的语法是这样的。link
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
假设你有这样的控制器
app.controller('MainCtrl', function($scope)
$scope.Values = [
"Name":"Value 1","ID":1,
"Name":"Value 2","ID":2,
"Name":"Value 3","ID":3,
"Name":"Value 4","ID":4
];
$scope.SelectedByName='Value 2'; //Default setting drop down by Name property
$scope.SelectedById=4; //Default setting drop down by ID property
);
如果您遵循以下语法，则 name 或 Id 属性将设置为选定的变量。
如果您需要默认选择下拉菜单，那么您需要在控制器中设置相应的模型。（如上）
HTML：
<body ng-controller="MainCtrl">
By name :
<select ng-options="value.Name as value.Name for value in Values"
ng-model="SelectedByName" ng-change="Print()"></select>
Selected value is : SelectedByName
<br>
By ID :
<select ng-options="value.ID as value.Name for value in Values"
ng-model="SelectedById" ng-change="Print()"></select>
Selected id is : SelectedById
</body>
Demo plunker Click here
【讨论】：
看起来非常简单，但是如果我想在选择选项值中设置整个对象"ID":2,"Name":"DAO" 而不是 name 或 id 怎么办？我用于ng-options 的语法是在ng-model 属性中设置整个对象，并且从控制器设置它不起作用
检查更新的插件here
我已经根据我的要求更新了 plunkr，因为我从服务器获取完整对象并将其绑定到 select 不起作用，链接：plnkr.co/edit/p32Voi6pvuhTeJwHX9KX?p=preview
像这样使用 track by <select ng-options="value as value.Name for value in Values track by value.ID" ng-model="SelectedByObj"></select>
这是有效的，我已经更新了 plunker plnkr.co/edit/p32Voi6pvuhTeJwHX9KX?p=preview以上是关于angularjs - 使用 JS 对象设置选择元素选项值的主要内容，如果未能解决你的问题，请参考以下文章
angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件
使用 AngularJS 在表单提交时将选择字段重新设置为默认值