Question

我是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属性时，未选中该值，并在option元素中添加了一个空的select元素。我在动态设置时使用{{SelectedName}}来检查值，当我手动选择select元素中的相同值时，两者都是{"ID":2,"Name":"DAO"}完全相同。我在这里做错了什么？

Answer 1

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>

演示plunker Click here

Answer 2

首先，您应该在SelectName中初始化$scope。

接下来你可以使用：

ng-options="x.id as x.name for x in values"

您可以在模板中显示{{values}}并且它看起来不错吗？当数据被推入值时，您可能会遇到重绘模板的问题。也请这样检查。

Answer 3

这是一个工作片段。我猜你没有把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>

Answer 4

我有同样的问题，我找到了解决方案：请勿使用ng-options但<option>代码

<select ng-model="..."> <option ng-repeat="..."> {{ ... }} </option></select>

angularjs - 使用JS对象设置select元素选项值

4 个答案: