Javascript angularjs-使用JS对象设置选择元素选项值_Javascript_Angularjs_Json

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

javascript angularjs json

Javascript angularjs-使用JS对象设置选择元素选项值,javascript,angularjs,json,Javascript,Angularjs,Json,我对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 = nameVal

我对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));
            });

以下是我使用agularjs绑定选择的

select

：

<select ng-model="SelectedName" ng-options="x.Name for x in Values">/select>

/select>

当我在

select

元素中选择一个值时，整个

NameValue

对象将被设置到

SelectedName

属性中，这正是我尝试执行的操作。

现在，当我尝试动态设置

SelectedName

属性时，该值没有被选中，并且在

select

元素中添加了一个空的

选项

元素。我使用

{{SelectedName}

检查动态设置时的值，以及在

select

元素中手动选择相同的值时的值，这两个值都是

{ID:2，“Name”：“DAO”}

完全相同的值。我做错了什么？

首先-您应该在

$scope

中初始化

选择name

接下来，您可以使用：

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

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

这里是一个工作片段。我猜您没有将值定义为数组，在推动任何操作之前，您必须将变量定义为数组

var-app=angular.module（'myApp'，[]）；
函数名称值（名称值）{
var self=这个；
self.ID=nameValue.ID；
self.Name=nameValue.Name；
}
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.Values=[]；
$scope.jsonString=[{
“名称”：“值1”，
“ID”：1
}, {
“名称”：“值2”，
“ID”：2
}, {
“名称”：“值3”，
“ID”：3
}, {
“名称”：“值4”，
“ID”：4
}];
angular.forEach（angular.fromJson（$scope.jsonString），函数（值，键）{
$scope.Values.push（新名称值（value））；
});
log（$scope.Values）；
});

/选择>
我也遇到了同样的问题，我找到了一个解决方案：
不要使用ng选项
，而是使用
标记
<select ng-model="..."> <option ng-repeat="..."> {{ ... }} </option></select>

{{…}
ng options的语法是这样的
如果遵循以下语法，则名称或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>


姓名：
所选值为：{{SelectedByName}}


按ID:
所选id为：{{SelectedById}}

Demo plunker
您是否在ng view
指令中初始化了SelectedName
？看起来很简单，但是如果我想在选择选项值中设置整个对象{“ID”：2，“Name”：“DAO”}
，而不是Name
或ID
，该怎么办？我用于ng options
的语法是在ng model
属性中设置整个对象，并从控制器设置它不起作用检查更新的plunker我已根据我的要求更新了plunkr，因为我从服务器获取完整对象并将其绑定到select不起作用，链接：像这样使用track by这很有效，我已经更新了plunker
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

});

<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>