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

我是AngularJS的新手，请耐心等待。angularjs - 用JS对象设置选择元素选项值

以下是我试图在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"}，它们完全相同。我在这里做错了什么？

来源

2017-07-25 seadrag0n

你初始化了'NG-view'指令的'SelectedName'？ –

的NG-选项的语法是什么喜欢这个。 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 

});

如果你按照下面的语法，那么无论名称或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

来源

2017-07-25 10:36:11 himanshu

看起来非常直接，但如果我想在选择选项值而不是'name'或'id'中设置整个对象'{“ID”：2，“Name”：“DAO”}？他们用于'ng-options'的语法是将整个对象设置在'ng-model'属性中，并且从控制器中设置它不起作用 – seadrag0n

检查更新的plunker [here]（https://plnkr.co /编辑/ m4ov2ANe8uT7sphu48EQ？p =预览） – himanshu

我已经更新了我的需求plunkr，因为我从服务器获取完整对象并绑定相同的选择不起作用，请链接：https：//plnkr.co/edit/ p32Voi6pvuhTeJwHX9KX？p =预览 – seadrag0n

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

接下来，您可以使用：

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

你能在你的模板显示{{值}}，它的好看？当数据被推入价值时，您可能遇到重绘模板的问题。也检查这种方式。

来源

2017-07-25 09:50:42

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

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>

来源

2017-07-25 09:51:29

我有同样的问题，我找到了解决办法：不要使用ng-options但<option>标签

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

来源

2017-07-25 09:52:22

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

回答

相关问题