You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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-valueng-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

火山引擎 最新活动