选择框中的角度布尔值
Angular, boolean value in a select box
我想使用select将布尔值设置为true或false。这是我的代码:
<select class="span9" ng-model="proposal.formalStoryboard">
<option value="false">Not Included</option>
<option value="true">Included</option>
</select>
值(proposal.formalStoryboard)已正确设置为true或false,但当值已分配时,更改不会反映在选择框中
我尝试了ng value="true"和ng value="false",而不仅仅是value,但效果不太好。
EDIT:评论员指出,我的原始解决方案并没有如所声称的那样工作。我已经更新了答案,以反映下面其他人给出的正确答案(我不能删除已接受的答案)。
对于Angular 1.0.6,请考虑以下HTML:
<div ng-app="">
<div ng-controller="MyCntrl">
<select ng-model="mybool"
ng-options="o.v as o.n 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的工作演示,这是Angle 1.3.14的工作演示。
就这样做:
<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>
如果使用angularjs版本>= 1.2.0
,则可以访问指令ng-value
可以在选项元素上使用ng-value
。你的htmls会这样工作。
<select ng-model="proposal.formalStoryboard">
<option ng-value="true">Included</option>
<option ng-value="false">Not Included</option>
</select>
它也适用于收音机和复选框。
我建议对此使用指令。和往常一样,我尽量远离超时和其他异步操作,而选择更权威、更直接的控制。
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
)之前完成
例如,我将此指令(用于真/假选择)与selectpicker
指令一起使用,该指令将select
元素封装在selectpicker
引导插件中。
编辑:
这里需要注意的是,html值必须是字符串值,我忘了提到这一点。指令所做的是在视图和模型之间进行转换,将模型值保持为boolean
,将视图保持为string
格式:
%select.selectpicker{ ng: { model: 'modelForm.listed' }, selectpicker: '{ }', boolean: true }
%option{ value: 'true' } Listed
%option{ value: 'false' } Unlisted
这也会起作用。只需为值放入一个角度表达式,就可以强制该值为布尔值。
<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>
我为您创建了示例,请检查一下。
这是你想要使用模型来驱动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);
}
}
我在这个令人沮丧的问题上几乎没有成功。我的解决方案虽然不太优雅,因为它是一行额外的代码,但每次都能解决它。这可能不适用于所有应用程序。
$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();
在尝试将其重新绑定到页面上显示的模型之前,将其转换为"真实"字符串,可以正确选择值。
真正的问题是,如果您选择了一个值,则类型从布尔变为字符串({"Value":false}-->{"Value":"false"})如果返回,可能会导致错误。
对我来说,这两个问题的最佳解决方案是Thiago Passos在这篇文章中的解决方案。(https://stackoverflow.com/a/31636437/6319374)
<script type='text/javascript'>
function MyCntrl($scope) {<!--from ww w . j a v a 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>
- 如何从javascript/jquery中的复选框中获取布尔值
- KendoUI网格行过滤器,带有布尔值下拉列表
- php布尔值's小写AND大写和数字布尔值'可以接受
- 使用$_POST值选择下拉列表
- 他们是如何使用angular/jqLite find()方法按属性名称和值选择元素的?ng conf 2015
- select中布尔值的Angularjs ng值不起作用
- 由于布尔值的变化,Django视图中的字符串格式不正确
- MeteorJs Alded autoform,如何从布尔值复选框中获得所需值
- 将字符串动态转换为布尔值
- 将布尔值存储在隐藏字段中以进行表单处理
- 类型错误:布尔值不是 Angular 中登录函数的函数
- Yui Get 复选框返回数组而不是布尔值
- 为什么 1.2 == true 返回 false 如果布尔值 (1.2) 实际上是真的
- 为什么第一个将其视为布尔值,其次不将其视为布尔值
- 当值可能不是正确的布尔值时,如何测试 true
- jquery -ajax 不检查控制器的布尔值
- JS生成随机布尔值
- 通过选择器检查对象是否存在,使用jQuery或Javascript返回布尔值
- 选择框中的角度布尔值
- JavaScript选择前n个布尔值