AngularJS复选框取值问题：需获取自定义值而非布尔值

我明白你的困扰——默认情况下AngularJS的复选框ng-model确实只会返回true/false来表示选中状态，但想要获取{{i.name}}对应的文本值完全可以实现，下面分场景给你解决方案：

问题根源 #

你之前的代码里，ng-init="search.industries = i.name"只是初始化了变量，但复选框的默认行为会将ng-model绑定的变量自动替换为布尔值（勾选=true，取消=false），所以无论你初始设置什么值，最终都会被覆盖。要改变这个行为，需要用AngularJS提供的ng-true-value和ng-false-value指令来指定选中/取消时的具体值。

场景1：单个复选框（只需要获取当前选中项的文本） #

如果这是单个复选框，你可以直接给ng-true-value设置为{{i.name}}的字符串形式（注意必须用单引号包裹，否则会被解析为变量），ng-false-value设置为空字符串或你需要的默认值：

修改后的HTML代码 #

<div class="checkbox checkbox-warning">
  <input 
    type="checkbox" 
    ng-model="search.industries" 
    ng-true-value="'{{i.name}}'" 
    ng-false-value="''"
    class="styled" 
    id="industry-{{i.id}}" 
    data-taggable="1" 
    data-tag-id="i-agriculture-fisheries-plantation">
  <!-- 可以实时查看当前值 -->
  当前选中值: {{search.industries}}
  <label for="industry-{{i.id}}">{{i.name}}</label>
</div>

这样勾选时search.industries就会变成i.name的文本内容，取消勾选时则为空字符串。

场景2：多个复选框（需要收集所有选中项的文本） #

从你的代码里的i.name、i.id来看，这应该是用ng-repeat循环生成的多个复选框，这种情况下我们需要把选中的值收集到一个数组里：

第一步：在控制器中初始化数组 #

先在你的AngularJS控制器里定义一个数组用来存储选中的行业名称：

$scope.search = {
  selectedIndustries: []
};

第二步：修改HTML代码 #

把ng-model绑定到这个数组，同时用ng-true-value指定每个复选框对应的i.name：

<!-- 假设你是用ng-repeat循环生成这些复选框 -->
<div class="checkbox checkbox-warning" ng-repeat="i in industriesList">
  <input 
    type="checkbox" 
    ng-model="search.selectedIndustries" 
    ng-true-value="'{{i.name}}'" 
    ng-false-value="''"
    class="styled" 
    id="industry-{{i.id}}" 
    data-taggable="1" 
    data-tag-id="i-agriculture-fisheries-plantation">
  <label for="industry-{{i.id}}">{{i.name}}</label>
</div>

<!-- 实时查看所有选中的项 -->
已选中的行业: {{search.selectedIndustries | json}}

这样每勾选一个复选框，对应的i.name就会被加入search.selectedIndustries数组，取消勾选时则会从数组中移除，完美满足你获取具体文本值的需求。

注意事项 #

• ng-true-value和ng-false-value的值如果是字符串，必须用单引号包裹，比如'{{i.name}}'，否则AngularJS会尝试将其解析为作用域中的变量，导致报错或不符合预期的结果。
• 如果你的i.name是动态生成的，确保ng-repeat的数据源（比如示例中的industriesList）在控制器中已经正确定义和初始化。

内容的提问来源于stack exchange，提问作者dev_02