我在其他帖子中已经阅读过它,但我无法理解.
我有一个阵列,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
我想将其渲染为:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
而且我想选择ID = 000002的选项.
我已经阅读过选择并试过了,但我无法弄明白.
我对Angular和ng-options.有点困惑.
我有一个简单的数组,我想用它初始化一个选择.但是,我希望选项值=标签.
$scope.options = ['var1', 'var2', 'var3'];
<select ng-model="myselect" ng-options="o for o in options"></select>
我得到了什么:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
我想要的是:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
所以我尝试过:
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(但它不起作用.)
我的表单是外部提交的,这就是为什么我需要'var1'作为值而不是0.
我正在使用ng-options从下拉列表中选择值.我希望能够将旧值与新值进行比较.ng-change适用于获取下拉的新值,但我如何同时获得新值和原始值？
<select ng-change="updateValue(user)" ng-model="user.id" ng-options="user.id as user.name for user in users"></select>
例如,假设我想让控制器记录,"你以前的user.name是BILL,你当前的用户名是PHILLIPE."
我需要使用关联数组作为select使用AngularJS的选项的数据源.
是否可以使用这样的数组？
{
"key1": "val1",
"key2": "val2",
"key3": "val3",
...
}
得到这样的东西:
<select>
<option value="key1">val1</option>
<option value="key2">val2</option>
<option value="key3">val3</option>
...
</select>
我阅读了文档,但我无法理解如何实现这一目标.
我正在尝试使用ng-options和a <select>将数字整数值绑定到相应选项的列表.在我的控制器中,我有这样的事情:
myApp.controller('MyCtrl', function() {
var self = this;
var unitOptionsFromServer = {
2: "mA",
3: "A",
4: "mV",
5: "V",
6: "W",
7: "kW"
};
self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
return { id: key, text: unitOptionsFromServer[key] };
});
self.selectedUnitOrdinal = 4; // Assume this value came from the server.
});
HTML:
<div ng-controller="MyCtrl as ctrl">
<div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
<select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
</div>
这里有一个jsFiddle演示了这个问题,以及我采取的一些其他方法,但我并不满意.
正在使用空值初始化select选项,而不是在此示例中预期的"mV".如果您选择其他选项 - selectedUnitOrdinal正确更新,绑定似乎工作正常.
我注意到如果你将初始模型值设置为字符串而不是数字,那么初始选择就可以了(参见小提琴中的#3).
我真的希望ng-options能够很好地使用数字选项值.我怎样才能优雅地实现这一目标？
是否可以使用ng-options它根据标准呈现为禁用的行？
这个:
<select ng-options="c.name group by c.shade for c in colors">
也许有可能变成这样的事情:
<select ng-options="c.name group by c.shade for c in colors | disabled(c.shade)">
让我们说通过一个过滤器可以返回disabled='disabled'所有颜色有阴影="黑暗"
<select>
<optgroup label="dark">
<option value="0" disabled="disabled">black</option>
<option value="2" disabled="disabled">red</option>
<option value="3" disabled="disabled">blue</option>
</optgroup>
<optgroup label="light">
<option value="1">white</option>
<option value="4">yellow</option>
</optgroup>
</select>
我很难理解ng-options如何与数据源一起工作.我已经阅读了文档,我觉得我正在完成所需的工作,但在尝试时仍然会遇到问题.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
angular.module('app', [])
.controller('IndexCtrl', ['$scope', function($scope) {
$scope.types = {
1: "value1",
2: "value2",
5: "value3"
};
}]);
</script>
</head>
<body ng-controller="IndexCtrl">
<select ng-model="type" ng-options="k as v for(k, v) in types">
<option value="">Select Type</option>
</select>
</body>
</html>我总是在控制台中收到此错误:
错误:
预期的ngOptions形式为' select(as label)？for(key,)？值的集合(由轨道EXPR)？" 但是在类型中得到'k为(k,v)的v'.
我做错了什么？
请参见plunkr:
我有价格的数组(0,0.99,1.99...等),我想显示<select>.
我想用角的ng-options这样
<select ng-model="create_price" ng-options="obj for obj in prices"/>
由于这是显示它上面会产生一个选择0,0.99,1.99...
但我想在代码中使用过滤器使得每个字时的价格"呈现(或者类似的东西),代码将运行一个函数来改变浮点数为字符串和现在(free,0.99$,1.99$...等).
我有办法做到这一点吗？
谢谢
如何应用ng-translate翻译选择框内的选项.
例如:
模板:
<select class="form-control" ng-model="me.gender" ng-options="gender.name for gender in genders">
</select>
控制器:
$scope.genders = [{code: "M", name:"TXT_MALE"}, {code: "F", name:"TXT_FEMALE"}]
enUS.json:
{
"TXT_MALE": "Male",
"TXT_FEMALE": "Female",
}
我尝试添加过滤器,ng-options="gender.name for gender in genders | translate"
但显然它是添加过滤器到$scope.genders数组而不是单个元素
我尝试编写自己的过滤器(我是新手)
filter('translateArrayObj', ['$translate', '_', function($translate, _) {
return function(arr) {
var arr2 = [];
angular.forEach(arr, function (value, key) {
$translate(value.name).then(function(translation) {
var obj2 = angular.copy(value);
obj2.name = translation;
obj2.code = value.code;
arr2.push(obj2);
});
});
return arr2;
}
}])
但我得到了以下错误
Error: [$rootScope:infdig] …摆弄相关代码:http: //jsfiddle.net/gFCzV/7/
我正在尝试设置下拉列表的选定值,该下拉列表绑定到ng-repeat中引用的对象的子集合.我不知道如何设置所选的选项,因为我无法以任何我所知道的方式引用它所绑定的集合.
HTML:
<div ng-app="myApp" ng-controller="SomeController">
<div ng-repeat="Person in People">
<div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
<div class="listitem" ng-repeat="Choice in Person.Choices">
{{Choice.Name}}:
<select
ng-model="Choice.SelectedOption"
ng-options="choice.Name for choice in Choice.Options"></select>
{{Choice.SelectedOption.ID}}
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
$scope.People = [{
"firstName": "John",
"lastName": "Doe",
"Choices": [
{
"Name":"Dinner",
"Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
"SelectedOption":{Name:"Chicken",ID:2} //this doesn't work
},
{
"Name":"Lunch",
"Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
"SelectedOption":""
}
],
}, {
"firstName": "Jane",
"lastName": "Doe"
}];
});
这是我应该在模型上使用带有SelectedIndex的ng-init的一种情况吗？