Angular复选框:值为Yes时设选中状态(无法修改数据类型)
解决AngularJS复选框绑定字符串类型值的问题
嘿,我懂你的困扰——AngularJS的复选框默认和布尔值绑定,但你没法把track.Visible改成布尔型,只能用字符串的"Yes"/"NO"这类值对吧?我来给你拆解正确的实现方案:
先说说你之前尝试的几种写法的问题:
- 第一种
<td>{{track.Visible}}</td>只是单纯显示值,没关联复选框状态,达不到需求; - 第二种用
ng-checked的思路是对的,但其实不需要多余的三元运算(track.Visible==='YES'本身就返回布尔值),另外要注意匹配你实际数据的大小写(比如如果后台返回的是"Yes"而不是全大写"YES",判断条件就不成立了); - 第三种用
ng-model配合ng-true-value的问题在于,你没给字符串值加单引号,AngularJS会把YES当成变量解析,而不是字符串常量,所以失效了。
下面给你两种靠谱的实现方案,按需选择:
方案1:仅展示状态(无需双向修改)
如果只是需要根据track.Visible的值显示复选框是否选中,不需要修改这个值,直接用ng-checked就好:
<td> <label> <input type="checkbox" ng-checked="track.Visible === 'Yes'"> </label> </td>
注意:把
'Yes'改成你实际的字符串值(比如全大写的'YES'),如果大小写不固定,还可以用toLowerCase()统一判断:ng-checked="track.Visible.toLowerCase() === 'yes'"
方案2:双向绑定(修改复选框同步更新值)
如果需要勾选/取消复选框时,同步把track.Visible改成对应的字符串值,就用ng-model配合ng-true-value和ng-false-value,记得给字符串加单引号:
<td> <label> <input type="checkbox" ng-model="track.Visible" ng-true-value="'Yes'" ng-false-value="'No'"> </label> </td>
这样当复选框选中时,track.Visible会被设置为字符串"Yes",取消选中时变成"No",完全适配你的字符串类型数据,不需要修改原数据结构。
内容的提问来源于stack exchange,提问作者ChrisM




