[英]Default Option disappears after select non-empty option
我有我的問題JSFiddle 的簡單示例。
開始時我有空/默認選項,但是當我從下拉列表中選擇其他內容時,此選項消失。
選擇后如何離開此選項?
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions"
ng-model="data.selectedOption"></select>
角度控制器:
.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'} //This sets the default value of the select in the ui
};
我嘗試使用ng-init
將默認選項設置為null
但這不起作用
請在 select 元素中添加空的 option 元素並檢查。
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions"
ng-model="data.selectedOption">
<option></option>
</select>
使用這種方法:
HTML
<div ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.id as option.name for option in data.availableOptions"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
AngularJS
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: '2' //This sets the default value of the select in the ui
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.