如何在Angular.js选择框中使用默认选项

本文翻译自：How to have a default option in Angular.js select box

I have searched Google and can't find anything on this. 我已经搜索过Google，但找不到任何东西。

I have this code. 我有这个代码。

<select ng-model="somethingHere" ng-options="option.value as option.name for option in options"
></select>

With some data like this 有了这样的数据

options = [{name: 'Something Cool',value: 'something-cool-value'
}, {name: 'Something Else',value: 'something-else-value'
}];

And the output is something like this. 输出是这样的。

<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>

How is it possible to set the first option in the data as the default value so you would get a result like this. 如何将数据中的第一个选项设置为默认值，这样您将得到这样的结果。

<select ng-model="somethingHere" ....><option value="0" selected="selected">Something Cool</option><option value="1">Something Else</option>
</select>

#1楼

参考：https://stackoom.com/question/1EL9j/如何在Angular-js选择框中使用默认选项

#2楼

Try this: 尝试这个：

HTML HTML

<select ng-model="selectedOption" ng-options="option.name for option in options">
</select>

Javascript 使用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 . 在这里插一下。

If you really want to set the value that will be bound to the model, then change the ng-options attribute to 如果您确实要设置将绑定到模型的值，则将ng-options属性更改为

ng-options="option.value as option.name for option in options"

and the Javascript to 和Javascript

...
$scope.selectedOption = $scope.options[0].value;

Another Plunker here considering the above. 另一个Plunker 这里考虑以上。

#3楼

You can simply use ng-init like this 您可以像这样简单地使用ng-init

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options">
</select>

#4楼

If you want to make sure your $scope.somethingHere value doesn't get overwritten when your view initializes, you'll want to coalesce ( somethingHere = somethingHere || options[0].value ) the value in your ng-init like so: 如果要确保在初始化视图时$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>

#5楼

My solution to this was use html to hardcode my default option. 我的解决方案是使用html硬编码默认选项。 Like so: 像这样：

In HAML: 在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 &amp; ON

In HTML: 在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 &amp; ON</option>
</select>

I want my default option to return all values from my api, that's why I have a blank value. 我希望我的默认选项从我的api返回所有值，这就是为什么我有一个空白值。 Also excuse my haml. 还请原谅。 I know this isn't directly an answer to the OP's question, but people find this on Google. 我知道这不是OP的问题的直接答案，但是人们可以在Google上找到它。 Hope this helps someone else. 希望这对其他人有帮助。

#6楼

I think, after the inclusion of 'track by', you can use it in ng-options to get what you wanted, like the following 我认为，在包含“ track by”之后，您可以在ng-options中使用它来获取所需的内容，如下所示

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

This way of doing it is better because when you want to replace the list of strings with list of objects you will just change this to 这种方法更好，因为当您要用对象列表替换字符串列表时，只需将其更改为

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

where somethingHere is an object with the properties name and id, of course. 当然，这里的东西是具有属性名称和ID的对象。 Please note, 'as' is not used in this way of expressing the ng-options, because it will only set the value and you will not be able to change it when you are using track by 请注意，“ as”不会以这种方式表示ng-options，因为它只会设置值，并且在使用track by时将无法更改它

如何在Angular.js选择框中使用默认选项相关推荐

node.js api接口_如何在Node.js API客户端中正常处理故障
node.js api接口 by Roger Jin 罗杰·金(Roger Jin) 如何在Node.js API客户端中正常处理故障 (How to gracefully handle failur ...
rethinkdb_如何在Node.js应用程序中使用RethinkDB
rethinkdb 这篇文章是由同行评审Agbonghama柯林斯和马丁·马丁内斯 . 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! Web应用程序最常见的任务之一就是 ...
node.js ejs_如何在Node.js应用程序中使用EJS模板
node.js ejs by Jennifer Bland 詹妮弗·布兰德(Jennifer Bland) 如何在Node.js应用程序中使用EJS模板 (How to use EJS Templat ...
每当再右侧的选择框中选中一个人的名字时，便在左侧的文本区中显示出此人的情况介绍，按close按钮时结束程序的运行
每当再右侧的选择框中选中一个人的名字时,便在左侧的文本区中显示出此人的情况介绍,按close按钮时结束程序的运行 package p2;import java.awt.event.*; import ...
Js选择框脚本移动操作select 标签中的 option 项的操作事项
题目:在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中.反之亦然.如下: 在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中.反之亦然. 此问题需用到选择 ...
angular2创建应用_如何在Angular 2+应用程序中使用JavaScript库
angular2创建应用 Do you remember when you were learning AngularJS (version 1), and tutorials kept tellin ...
下拉选数据查询过来的如何设置默认值为空_如何在某些情况下禁止提交Select下拉框中的默认值或者第一个值(默认选中的就是第一个值啦……)...
群里有个帅哥问了这么个问题,他的下拉框刚进页面时是隐藏起来的,但是是有值的,为啥呢?因为下拉框默认选中了第一个值呗,,, 所以提交数据的时候就尴尬啦,明明没有选,但是还是有值滴.怎么办呢? 一开始看到 ...
如何在某些情况下禁止提交Select下拉框中的默认值或者第一个值(默认选中的就是第一个值啦……)...
群里有个帅哥问了这么个问题,他的下拉框刚进页面时是隐藏起来的,但是是有值的,为啥呢?因为下拉框默认选中了第一个值呗,,, 所以提交数据的时候就尴尬啦,明明没有选,但是还是有值滴.怎么办呢? 一开始看到 ...
win10屏幕快照快捷键_如何在Windows 8和10中更改默认屏幕快照文件夹的位置
win10屏幕快照快捷键 Windows redesigned its screenshot feature in Windows 8, and you no longer need to launc ...

如何在Angular.js选择框中使用默认选项

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何在Angular.js选择框中使用默认选项相关推荐

最新文章

热门文章