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>