我已经搜索了谷歌,但在这方面找不到任何东西。
我有这个代码。
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
></select>
有了这样的一些数据
options = [{
name: 'Something Cool',
value: 'something-cool-value'
}, {
name: 'Something Else',
value: 'something-else-value'
}];
输出是这样的。
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Something Cool</option>
<option value="1">Something Else</option>
</select>
如何将数据中的第一个选项设置为默认值,这样您就会得到这样的结果。
<select ng-model="somethingHere" ....>
<option value="0" selected="selected">Something Cool</option>
<option value="1">Something Else</option>
</select>
a **single** hard-coded <option> element ... can be nested into the <select> element.
选项不能已经成为标记的一部分。
您可以像这样简单地使用 ng-init
<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
如果您想确保在视图初始化时不会覆盖 $scope.somethingHere
值,您需要像这样合并 (somethingHere = somethingHere || options[0].value
) ng-init 中的值:
<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0].value"
ng-options="option.value as option.name for option in options">
</select>
options
为空?就像 options
数据来自外部来源一样。
ng-init="somethingHere= somethingHere || 'Select one' "
我试过这样。但它没有用。我的代码有什么问题
尝试这个:
HTML
<select
ng-model="selectedOption"
ng-options="option.name for option in options">
</select>
Javascript
function Ctrl($scope) {
$scope.options = [
{
name: 'Something Cool',
value: 'something-cool-value'
},
{
name: 'Something Else',
value: 'something-else-value'
}
];
$scope.selectedOption = $scope.options[0];
}
Plunker here。
如果您确实想设置将绑定到模型的值,则将 ng-options
属性更改为
ng-options="option.value as option.name for option in options"
和Javascript
...
$scope.selectedOption = $scope.options[0].value;
考虑到上述情况的另一个 Plunker here。
只有一个 answer by Srivathsa Harish Venkataramana 提到了 track by
,这确实是一个解决方案!
下面是一个示例以及如何在 select ng-options
中使用 track by
的 Plunker(下面的链接):
<select ng-model="selectedCity"
ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
如果在角度范围内定义了 selectedCity
,并且它具有与 cities
列表中任何 city
的任何 id
相同的值的 id
属性,则它将在加载时自动选择。
这是 Plunker:http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
有关更多详细信息,请参阅源文档:https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
我认为,在包含 'track by' 之后,您可以在 ng-options 中使用它来获得您想要的内容,如下所示
<select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>
这种做法更好,因为当您想用对象列表替换字符串列表时,您只需将其更改为
<select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>
其中 somethingHere 是一个具有属性 name 和 id 的对象,当然。请注意,'as' 不是以这种方式表达 ng-options 的,因为它只会设置值,当你使用 track by 时你将无法更改它
接受的答案使用 ng-init
,但 document 表示尽可能避免使用 ng-init。
ngInit 唯一合适的用途是为 ngRepeat 的特殊属性设置别名,如下面的演示所示。除了这种情况,您应该使用控制器而不是 ngInit 来初始化作用域上的值。
您也可以使用 ng-repeat
而不是 ng-options
作为您的选项。通过 ng-repeat
,您可以将 ng-selected
与 ng-repeat
特殊属性一起使用。即 $index, $odd, $even 使这项工作无需任何编码。
$first
是 ng-repeat 特殊属性之一。
<select ng-model="foo">
<option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
{{value}}
</option>
</select>
---------------------- 编辑 ----------------
虽然这可行,但我更喜欢@当您知道要选择什么值时,mik-t 的答案是 https://stackoverflow.com/a/29564802/454252,它使用 track-by
和 ng-options
而不使用 ng-init
或 ng-repeat
。
仅当您必须选择第一项而不知道要选择什么值时,才应使用此答案。例如,我将其用于自动完成,这需要始终选择第一个项目。
ng-options
比 ng-repeat
更快且更优化。
select as
部分分配 <select>
模型的方式更加灵活”,“通过不为每个重复实例创建新范围来减少内存消耗” , “通过在 documentFragment
中创建选项而不是单独创建选项来提高渲染速度”
我对此的解决方案是使用 html 对我的默认选项进行硬编码。像这样:
在 HAML 中:
%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
%option{:value => "", :selected => "selected"}
BC & ON
在 HTML 中:
<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
<option value="" selected="selected">BC & ON</option>
</select>
我希望我的默认选项从我的 api 返回所有值,这就是为什么我有一个空白值。也请原谅我的haml。我知道这不是对 OP 问题的直接答案,但人们在 Google 上找到了这个。希望这对其他人有帮助。
使用下面的代码从您的模型中填充选定的选项。
<select id="roomForListing" ng-model="selectedRoom.roomName" >
<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>
</select>
根据您有多少选项,您可以将您的值放在一个数组中并像这样自动填充您的选项
<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
<option value="">Pick a Number</option>
</select>
就我而言,我只需要插入一个初始值来告诉用户选择一个选项,所以,我喜欢下面的代码:
<select ...
<option value="" ng-selected="selected">Select one option</option>
</select>
当我尝试使用值为 != 的空字符串(null)的选项时,该选项被 angular 替换,但是,当放置这样的选项(具有 null 值)时,选择会出现此选项。
对不起,我的英语不好,我希望我能在这方面有所帮助。
将 select 与 ngOptions 一起使用并设置默认值:
有关更多 ngOptions
使用示例,请参阅 ngOptions 文档。
angular.module('defaultValueSelect', []) .controller('ExampleController', ['$scope', function($scope) { $scope.data = { availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ], selectedOption: {id: '2', name: 'Option B' } //这设置了ui中select的默认值 }; }]);
Official documentation 关于带有角度数据绑定的 HTML SELECT
元素。
通过 ngModel 解析/格式化将选择绑定到非字符串值:
(function(angular) { 'use strict'; angular.module('nonStringSelect', []) .run(function($rootScope) { $rootScope.model = { id: 2 }; }) .directive('convertToNumber' , function() { return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$parsers.push(function(val) { return parseInt(val, 10); }); ngModel .$formatters.push(function(val) { return '' + val; }); } }; }); })(window.angular);
{{ 模型 }}
其他示例:
angular.module('defaultValueSelect', []) .controller('ExampleController', ['$scope', function($scope) { $scope.availableOptions = [ { name: 'Apple', value: 'apple' }, {名称:'Banana',值:'香蕉'},{名称:'Kiwi',值:'kiwi'}]; $scope.data = {selectedOption: $scope.availableOptions[1].value}; }] );
这对我有用。
<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
<option value="Cool">Something Cool</option>
<option value="Else">Something Else</option>
</select>
在我的情况下,因为默认值因表单中的情况而异。我在选择标签中添加了一个自定义属性。
<select setSeletected="{{data.value}}">
<option value="value1"> value1....
<option value="value2"> value2....
......
在指令中,我创建了一个检查值的脚本,当角度填充它时,将具有该值的选项设置为选中。
.directive('setSelected', function(){
restrict: 'A',
link: (scope, element, attrs){
function setSel=(){
//test if the value is defined if not try again if so run the command
if (typeof attrs.setSelected=='undefined'){
window.setTimeout( function(){setSel()},300)
}else{
element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);
}
}
}
setSel()
})
刚刚从 coffescript 即时翻译了这个,如果不是洞的话,至少它的要点是正确的。
这不是最简单的方法,但在价值变化时完成
响应 Ben Lesh's answer,应该有这一行
ng-init="somethingHere = somethingHere || options[0]"
代替
ng-init="somethingHere = somethingHere || options[0].value"
那是,
只需按如下方式使用 ng-selected="true"
:
<select ng-model="myModel">
<option value="a" ng-selected="true">A</option>
<option value="b">B</option>
</select>
我会在控制器中设置模型。然后选择将默认为该值。例如:html:
<select ng-options="..." ng-model="selectedItem">
角度控制器(使用资源):
myResource.items(function(items){
$scope.items=items;
if(items.length>0){
$scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
}
});
这对我有用
ng-selected="true"
ng-init
,因为您正在设置一个 ngModel。
如果您使用 ng-options
来呈现您的下拉菜单,则默认选择与 ng-modal 具有相同值的 option
。考虑这个例子:
<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">
因此,默认选择具有相同 list.key
和 selectedItem
值的选项。
我需要默认的“请选择”不可选择。我还需要能够有条件地设置默认选择的选项。
我通过以下简单的方式实现了这一点: JS 代码:// 翻转这 2 个以使用默认的“请选择”文本测试选定的默认值或无默认值 //$scope.defaultOption = 0; $scope.defaultOption = { 键:'3',值:'选项 3' };
$scope.options = [
{ key: '1', value: 'Option 1' },
{ key: '2', value: 'Option 2' },
{ key: '3', value: 'Option 3' },
{ key: '4', value: 'Option 4' }
];
getOptions();
function getOptions(){
if ($scope.defaultOption != 0)
{ $scope.options.selectedOption = $scope.defaultOption; }
}
HTML:
<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>
我希望这可以帮助其他有类似要求的人。
“请选择”是通过 Joffrey Outtier 的回答 here 完成的。
如果您有一些东西而不是仅仅初始化日期部分,您可以通过在控制器中声明它来使用 ng-init()
,并在 HTML 的顶部使用它。这个函数就像你的控制器的构造函数一样工作,你可以在那里启动你的变量。
angular.module('myApp', [])
.controller('myController', ['$scope', ($scope) => {
$scope.allOptions = [
{ name: 'Apple', value: 'apple' },
{ name: 'Banana', value: 'banana' }
];
$scope.myInit = () => {
$scope.userSelected = 'apple'
// Other initiations can goes here..
}
}]);
<body ng-app="myApp">
<div ng-controller="myController" ng-init="init()">
<select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
</div>
</body>
<!--
Using following solution you can set initial
default value at controller as well as after change option selected value shown as default.
-->
<script type="text/javascript">
function myCtrl($scope)
{
//...
$scope.myModel=Initial Default Value; //set default value as required
//..
}
</script>
<select ng-model="myModel"
ng-init="myModel= myModel"
ng-options="option.value as option.name for option in options">
</select>
在你的角度控制器中试试这个......
$somethingHere = {name: 'Something Cool'};
您可以设置一个值,但您使用的是复杂类型,并且角度将搜索键/值以在您的视图中设置。
而且,如果不起作用,请尝试以下操作:ng-options="option.value as option.name for option in options track by option.name"
我认为最简单的方法是
ng-selected="$first"