AngularJS：如何在ng-model下拉选择框中将布尔值显示为文本

针对你遇到的需求——把JSON数组里的布尔值（true/false）在绑定ng-model的下拉选择框中显示为可读文本，这里有两种实用的解决方案：

方案一：直接在ng-options中处理显示逻辑 #

这种方法不需要修改原始数据，直接在HTML的ng-options指令里通过判断逻辑，将布尔值转换为对应的文本，简单直接。

示例代码 #

HTML部分：

<div ng-app="myApp" ng-controller="myCtrl">
  <span>选择配置项：</span>
  <select ng-model="selectedItem" 
          ng-options="item._text as (typeof item._text === 'boolean' ? (item._text ? '开启' : '关闭') : item._text) for item in string">
  </select>
  <p>当前选中的原始值：{{selectedItem}}</p>
</div>

JavaScript部分：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.string = [ 
    {"_attributes":{"name":"password"},"_text":"password"}, 
    {"_attributes":{"name":"url"},"_text":"mushmatch"}, 
    {"_attributes":{"name":"comments"},"_text":"comments"}, 
    {"_attributes":{"name":"check"},"_text":true}, 
    {"_attributes":{"name":"value"},"_text":123} 
  ];
});

这里的逻辑是：如果item._text是布尔类型，就把true显示为"开启"，false显示为"关闭"；其他类型（字符串、数字）直接显示原始内容。你可以根据需求把文本换成"True"/"False"或者其他自定义描述。

方案二：自定义过滤器（更优雅的复用方案） #

如果你的项目中多处需要将布尔值转换为文本，推荐自定义一个AngularJS过滤器，这样可以复用逻辑，代码更整洁易维护。

示例代码 #

定义过滤器：

var app = angular.module('myApp', []);
// 自定义布尔值转文本的过滤器
app.filter('boolToLabel', function() {
  return function(input) {
    // 判断是否为布尔值，是则转换为对应文本，否则返回原值
    if (typeof input === 'boolean') {
      return input ? '是' : '否';
    }
    return input;
  };
});

app.controller('myCtrl', function($scope) {
  $scope.string = [ 
    {"_attributes":{"name":"password"},"_text":"password"}, 
    {"_attributes":{"name":"url"},"_text":"mushmatch"}, 
    {"_attributes":{"name":"comments"},"_text":"comments"}, 
    {"_attributes":{"name":"check"},"_text":true}, 
    {"_attributes":{"name":"value"},"_text":123} 
  ];
});

HTML部分使用过滤器：

<div ng-app="myApp" ng-controller="myCtrl">
  <span>选择配置项：</span>
  <select ng-model="selectedItem" 
          ng-options="item._text as (item._text | boolToLabel) for item in string">
  </select>
  <p>当前选中的原始值：{{selectedItem}}</p>
</div>

这种方式的好处是，后续任何需要转换布尔值为文本的地方，都可以直接使用| boolToLabel过滤器，不需要重复写判断逻辑。

补充说明 #

• 两种方案都不会修改你的原始$scope.string数据，ng-model绑定的还是原始的布尔值（true/false），只是在显示层做了转换。
• 如果需要绑定整个数组对象而不是_text字段，可以调整ng-options的结构，比如item as (item._text | boolToLabel) for item in string，此时ng-model会绑定完整的数组元素。

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