使用ng-model和static选项<true>(true / false)

时间:2017-01-17 10:00:16

标签: javascript angularjs

我有一个简单的select元素,我想用它来设置一个布尔值: #JS;在控制器内的某个地方 var vm = this; vm.isAdmin = false; 返回vm; #HTML &lt; select ng-model =“formCtrl.isAdmin”&gt;     &lt; option ng-value =“true”&gt;是&lt; / option&gt;     &lt; option ng-value =“false”&gt; No&lt; / option&gt; &LT; /选择&GT; 不幸的是,在加载网站时,没有选择任何内容。 我知道我可以使用ng-repeat,但我不想,因为它对我来说似乎不切实际。 更新: 虽然可能的副本具有基本相同的接受答案(因为它是实现所需行为的最佳方式),但问题本身是不同的。我实际上想要使用硬编码选项,而不是ng-options / ng-repeat。

3 个答案:

答案 0 :(得分:1)

为什么不使用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 }
];

Demo on JSFiddle

&#13;
&#13;
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'
  }];
}]);
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

请参阅this jsfiddle

答案 2 :(得分:1)

您需要基本使用以下语法作为选项标记(使用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>