angularjs - 使用 JS 对象设置选择元素选项值答案

【问题标题】：angularjs - setting select element option value with JS objectangularjs - 使用 JS 对象设置选择元素选项值
【发布时间】：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？

标签： javascript angularjs json

【解决方案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