angular度，布尔值在select框中
我想设置一个布尔值为true或false使用select这里是我的代码：
<select class="span9" ng-model="proposal.formalStoryboard"> <option value="false">Not Included</option> <option value="true">Included</option> </select> 值（proposal.formalStoryboard）正确设置为true或false， 但是当值已被分配时，更改不会反映在select框上。
我尝试了ng-value =“true”和ng-value =“false”，而不是只是价值，但它不工作。
编辑：评论家指出，我原来的解决scheme没有按要求工作。 我已经更新了答案，以反映其他人给出的正确答案（我无法删除已接受的答案）。
对于Angular 1.0.6，考虑这个HTML：
<div ng-app=""> <div ng-controller="MyCntrl"> <select ng-model="mybool" ng-options="ov as on for o in [{ n: 'Not included', v: false }, { n: 'Included', v: true }]"> </select> <p> Currently selected: <b>{{ mybool }}</b> opposite: {{ !mybool }} </p> </div> </div>
而这个JavaScript：
function MyCntrl($scope) { $scope.mybool = true; }
这里是一个适用于Angular 1.0.6的工作DEMO ，这里是一个适用于Angular 1.3.14的工作DEMO ，略有不同。
只是这样做：
<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]"> </select>
并定义：
$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};
为什么不使用这个？
<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>
我为你创build了样本，请检查一下。
是你想使用模型来驱动UI绑定？
<div ng-app ng-controller="Ctrl"> <select class="span9" ng-model="proposal.formalStoryboard"> <option value="false">Not Included</option> <option value="true">Included</option> </select> <button ng-click="changeValue();">Click</button> <div> function Ctrl($scope) { $scope.proposal = {}; $scope.proposal.formalStoryboard = true; $scope.changeValue = function () { $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard; console.log($scope.proposal.formalStoryboard); } }
我会build议使用这个指令。 像往常一样，我试图远离超时和其他asynchronous操作，而不是更权威和直接的控制。
directives.directive('boolean', function() { return { priority: '50', require: 'ngModel', link: function(_, __, ___, ngModel) { ngModel.$parsers.push(function(value) { return value == 'true' || value == true; }); ngModel.$formatters.push(function(value) { return value && value != 'false' ? 'true' : 'false'; }); } }; });
优先级是专门设置的，以便在任何其他指令之前完成（通常没有设置优先级，默认值为0 ）
例如，我使用这个伪指令（对于真/假select）与selectpicker伪指令，该select指令将select元素包装在selectpicker引导程序插件中。
编辑：
在这里，我忘了提到的警告是，你的html值需要string值。 指令所做的是在视图和模型之间进行转换，将模型值保存为boolean值，并将视图保存为string格式：
%select.selectpicker{ ng: { model: 'modelForm.listed' }, selectpicker: '{ }', boolean: true } %option{ value: 'true' } Listed %option{ value: 'false' } Unlisted
这个令人沮丧的问题我没有取得什么成就。 我的解决scheme，虽然不是太优雅，因为它是一个额外的代码行，每次解决它。 这可能不适用于每个应用程序。
$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();
在尝试将其重新绑定到页面上显示的模型之前，将其转换为“真实”string，可以正确select值。
Angular在ng-model的Value绑定和给定Options中的Values之间做了严格的比较。 在最初的问题中给出的价值观是string“假”和“真”。 如果ng-model的值是booltypes，并且定义类似于{“Value”：false}，则string和bool之间的Angulars strict === comparsion不匹配，所以select框是空的。
真正的问题在于，如果您select一个值，则从布尔更改为string（{“值”：假} – > {“值”：“假”}）的types可能会导致错误，如果回发。
这两个问题的最佳解决scheme是Thiago Passos在本文中的一个。 （ https://stackoverflow.com/a/31636437/6319374 ）
这也会起作用。 只需通过为该值添加一个angular度expression式来强制该值为布尔值。
<select class="span9" ng-model="proposal.formalStoryboard"> <option value="{{false}}" ng-selected="proposal.formalStoryboard === false"> Not Included </option> <option value="{{true}}" ng-selected="proposal.formalStoryboard === true"> Included </option> </select>
<script type='text/javascript'> function MyCntrl($scope) {<!--from ww w . java 2s. c om--> $scope.mybool = true; } </script> </head> <body> <div ng-app=""> <div ng-controller="MyCntrl"> <select ng-model="mybool"> <option value="false">Not Included</option> <option value="true">Included</option> </select> <p> Currently selected: {{ mybool }} </p> </div> </div> </body> </html>
