簡體   English   中英

<select>帶有ng-model和靜態選項(是/否)

[英]<select> with ng-model and static options (true/false)

我有一個簡單的select元素,我想用它來設置一個布爾值:

# JS; somewhere inside the controller
var vm = this;
vm.isAdmin = false;
return vm;

# HTML
<select ng-model="formCtrl.isAdmin">
    <option ng-value="true">Yes</option>
    <option ng-value="false">No</option>
</select>

不幸的是,在加載網站時,沒有選擇任何內容。 我知道我可以使用ng-repeat,但是我不想這樣做,因為它對我來說似乎不切實際。

更新:盡管可能的重復項基本上具有相同的可接受答案(因為這是實現所需行為的最佳方法),但問題本身是不同的。 我實際上想使用硬編碼選項,而不是ng-options / ng-repeat。

為什么不使用ng-options呢?

<select ng-model="form.isAdmin" ng-options="o.value as o.name for o in options"></select>

控制器中的options數組:

$scope.options = [
    { 'name': 'Yes', 'value': true }, 
    { 'name': 'No', 'value': false }
];

JSFiddle上的演示


 var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', [function() { var vm = this; vm.isAdmin = false; vm.adminOptions = [{ val: true, name: 'Yes' }, { val: false, name: 'No' }]; }]); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl as form"> <select ng-model="form.isAdmin" ng-options="opt.val as opt.name for opt in form.adminOptions"> </select> {{form.isAdmin}} </div> </div> 

使用ng-options

<select ng-model="form.isAdmin" 
        ng-options="opt.val as opt.name for opt in [{val:true,name:'Yes'},{val:false,name:'No'}]">
</select>

看到這個jsfiddle

您基本上需要對選項標簽使用以下語法(使用ng-selected):

<select ng-model="formCtrl.isAdmin">
    <option ng-value="true" ng-selected="formCtrl.isAdmin">Yes</option>
    <option ng-value="false" ng-selected="!formCtrl.isAdmin">No</option>
</select>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM