我在其他帖子中读过它,但我无法弄清楚。
我有一个数组,
$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 的选项。
我已阅读 select 并尝试过,但我无法弄清楚。
ng-options
语法概览带有示例 here, from the SO Docs project。
需要注意的一件事是,ngModel 需要 ngOptions 才能工作...注意 ng-model="blah"
表示“将 $scope.blah 设置为所选值”。
尝试这个:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
这里有更多来自 AngularJS 的文档(如果你还没有看过的话):
对于数组数据源:为数组中的值选择标签 为数组中的值选择标签 按组为数组中的值标签 = 按组为数组中的值选择标签 对于对象数据源:对象中的(键,值)标签为对象中的 (key, value) 选择标签为对象中的 (key, value) 逐组标签 为对象中的 (key, value) 逐组选择标签
有关 AngularJS 中选项标记值的一些说明:
当您使用 ng-options
时,ng-options 写出的选项标记的值将始终是选项标记所关联的数组项的索引。这是因为 AngularJS 实际上允许您使用选择控件选择整个对象,而不仅仅是原始类型。例如:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
以上将允许您直接将整个对象选择到 $scope.selectedItem
中。 重点是,使用 AngularJS,您无需担心选项标签中的内容。让 AngularJS 处理它;您应该只关心您的模型中的内容。
Here is a plunker demonstrating the behavior above, and showing the HTML written out
处理默认选项:
关于默认选项,我在上面没有提到一些事情。
选择第一个选项并删除空选项:
您可以通过添加一个简单的 ng-init
来做到这一点,它将模型(来自 ng-model
)设置为您在 ng-options
中重复的项目中的第一个元素:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
注意:如果 foo
恰好被正确初始化为“虚假”的东西,这可能会有点疯狂。在这种情况下,您很可能需要在控制器中处理 foo
的初始化。
自定义默认选项:
这有点不同;在这里,您需要做的就是添加一个选项标记作为您选择的子项,具有空值属性,然后自定义其内部文本:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
注意:在这种情况下,即使您选择了不同的选项,“空”选项也会保留在那里。 AngularJS 下选择的默认行为不是这种情况。
进行选择后隐藏的自定义默认选项:
如果您希望自定义的默认选项在您选择一个值后消失,您可以将 ng-hide 属性添加到您的默认选项:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>
我正在学习 AngularJS,并且也在努力选择。我知道这个问题已经得到解答,但我还是想分享更多代码。
在我的测试中,我有两个列表框:汽车品牌和汽车型号。模型列表被禁用,直到选择了某些品牌。如果品牌列表框中的选择稍后被重置(设置为“选择品牌”),则模型列表框再次被禁用,并且其选择也被重置(为“选择模型”)。品牌作为资源被检索,而模型只是硬编码。
制作 JSON:
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
服务.js:
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
HTML 文件:
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
控制器.js:
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
出于某种原因,AngularJS 让我感到困惑。他们的文档在这方面非常糟糕。欢迎更多好的变体示例。
无论如何,我对 Ben Lesh 的回答略有不同。
我的数据集合如下所示:
items =
[
{ key:"AD",value:"Andorra" }
, { key:"AI",value:"Anguilla" }
, { key:"AO",value:"Angola" }
...etc..
]
现在
<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>
仍然导致期权价值成为指数(0、1、2等)。
添加 Track By 为我修复了它:
<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>
我认为您想将一组对象添加到选择列表中的情况更常见,所以我要记住这个!
请注意,从 AngularJS 1.4 开始,您不能再使用 ng-options,但您需要在选项标签上使用 ng-repeat
:
<select name="test">
<option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>
option
中使用“ng-change”检测变化?
这个问题已经回答了(顺便说一句,Ben 提供了非常好的和全面的答案),但我想添加另一个元素以确保完整性,这可能也非常方便。
在 Ben 建议的示例中:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
使用了以下 ngOptions 形式:select as label for value in array
。
Label 是一个表达式,其结果将是 <option>
元素的标签。在这种情况下,您可以执行某些字符串连接,以获得更复杂的选项标签。
例子:
ng-options="item.ID as item.Title + ' - ' + item.ID for item in items" 为您提供 Title - ID 等标签
ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items" 为您提供标题 (X) 等标签,其中 X 是标题字符串的长度。
您还可以使用过滤器,例如,
ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items" 为您提供诸如 Title (TITLE) 之类的标签,其中 Title 属性的 Title 值和 TITLE是相同的值,但转换为大写字符。
ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items" 如果您的模型具有属性,则为您提供标题(2015 年 9 月 27 日)之类的标签某天
在 CoffeeScript 中:
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>
如果您需要为每个选项自定义标题,则 ng-options
不适用。而是将 ng-repeat
与选项一起使用:
<select ng-model="myVariable">
<option ng-repeat="item in items"
value="{{item.ID}}"
title="Custom title: {{item.Title}} [{{item.ID}}]">
{{item.Title}}
</option>
</select>
我希望以下内容对您有用。
<select class="form-control"
ng-model="selectedOption"
ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>
它可能很有用。绑定并不总是有效。
<select id="product" class="form-control" name="product" required
ng-model="issue.productId"
ng-change="getProductVersions()"
ng-options="p.id as p.shortName for p in products"></select>
例如,您从 REST 服务填充选项列表源模型。一个选定的值在填充列表之前是已知的,并且已设置。使用 $http 执行 REST 请求后,列表选项就完成了。
但未设置所选选项。由于未知原因,影子 $digest 执行中的 AngularJS 未按应有的方式绑定选择。我必须使用 jQuery 来设置所选内容。这很重要! AngularJS,在阴影中,将前缀添加到由 ng-repeat 选项生成的 attr“值”的值。对于 int,它是“数字:”。
$scope.issue.productId = productId;
function activate() {
$http.get('/product/list')
.then(function (response) {
$scope.products = response.data;
if (productId) {
console.log("" + $("#product option").length);//for clarity
$timeout(function () {
console.log("" + $("#product option").length);//for clarity
$('#product').val('number:'+productId);
}, 200);
}
});
}
不定期副业成功案例分享
<option value="?" selected="selected"></option>
)?ng-if="foo"
I've had to useng-if=!foo
to hide the default empty option when other option is selected.此外,默认的空选项始终出现在组合列表的底部。我怎样才能把它放在组合列表的开头?