And*_*rin 437 javascript html-select angularjs ng-options
我在其他帖子中已经阅读过它,但我无法理解.
我有一个阵列,
$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的选项.
我已经阅读过选择并试过了,但我无法弄明白.
Ben*_*esh 794
需要注意的一点是ngOode 需要 ngModel才能工作......请注意ng-model="blah""将$ scope.blah设置为所选值".
试试这个:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
这里有更多来自AngularJS的文档(如果你还没有看到它):
对于数组数据源:
- 数组中值的标签
- 选择作为数组中值的标签
- 对于array中的值,按组分组标签=按数组中的值选择为标签组
对于对象数据源:
- 对象中的(键,值)标签
- 选择对象中的(键,值)标签
- 对象中的(键,值)按组标记
- 为对象中的(键,值)按组选择标签
有关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处理; 你应该只关心你范围内模型中的内容.
处理默认选项:
我上面没有提到一些与默认选项有关的事情.
选择第一个选项并删除空选项:
您可以通过添加一个简单ng-init来设置模型(from 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>
mp3*_*415 89
我正在学习AngularJS,并且也在努力选择.我知道这个问题已经回答了,但我想分享更多的代码.
在我的测试中,我有两个列表框:汽车制造和汽车模型.在选择某些make之前,模型列表将被禁用.如果稍后重置选择列表框(设置为'选择生成'),则模型列表框将再次被禁用并且其选择也将被重置(到"选择模型").将模型作为资源检索,而模型只是硬编码.
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<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>
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"};
}
Mat*_*ijs 38
出于某种原因,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等).
添加曲目通过修复它为我:
<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>
Tom*_*Tom 15
这个问题已经回答了(顺便提一下,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 - IDng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items"为您提供标签Title (X),X标题字符串的长度.您也可以使用过滤器,例如
ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items"为您提供标签Title (TITLE),其中Title属性的标题值和TITLE是相同的值,但转换为大写字符.ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items"Title (27 Sep 2015)如果您的模型具有属性,则为您提供标签SomeDate小智 7
在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>