angularJS CheckBox 绑定值

最新推荐文章于 2021-07-09 18:00:06 发布

原创最新推荐文章于 2021-07-09 18:00:06 发布 · 4.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #checkbox #控件 #ng-model #ng-true-value

本文介绍如何在AngularJS中使用ng-true-value和ng-false-value属性为checkbox设置自定义值，解决从后台获取的数据类型与checkbox绑定值类型不匹配的问题。

angularJS 用ng-model 向页面的控件绑定值。

checkbox 的值为boolean型，若绑上其他类型则不能正确识别。但是很有些情况下，我们从后台取回的绑定值不一定是boolean型，后台int型1表示true，2表示false是很常见的。

Angular提供了一种非常好的处理方式：使用ng-ture-value和ng-false-value。使用的不再是true或者false，而是用户自定义的值。

我们可以使ng-ture-value=“1”，ng-false-value=“0”来完美解决我们刚才的问题。

你还可以大开脑洞：

<label>你是纯爷们吗？</label>
<div class="checkbox">
    <label>
        <input type="checkbox" name="awesome" ng-model="formData.answer" ng-true-value="我是纯爷们！！" ng-false-value="我不是纯爷们！！">
        Are you awesome?
    </label>
</div>