AngularJS实现仅当模型字段为数组时渲染select标签的问题

需求很明确：我们需要只有当模型的字段是数组类型时，才渲染<select>下拉框；如果字段是非数组类型，就直接显示字段的值。下面是完整的可运行实现代码：

HTML 代码 #

<div ng-app>
  <div ng-controller="showCrtl">
    <button ng-click="showCon()">切换字段类型</button>
    <!-- 当foo是数组时显示下拉框 -->
    <select 
      ng-show="isArray(tabObj.foo)" 
      ng-model="selectedOption" 
      ng-options="x for x in tabObj.foo">
    </select>
    <!-- 当foo不是数组时显示文本 -->
    <span ng-if="!isArray(tabObj.foo)">{{tabObj.foo}}</span>
  </div>
</div>

JavaScript 代码 #

function showCrtl($scope) {
  // 点击按钮切换tabObj.foo的类型（数组/普通文本）
  $scope.showCon = function() {
    // 随机生成数组或普通文本，模拟业务场景中的不同字段类型
    $scope.tabObj = Math.random() > 0.5 
      ? { foo: ['选项A', '选项B', '选项C'] } 
      : { foo: '这是一个非数组的文本值' };
    // 切换时重置选中项
    $scope.selectedOption = null;
  };

  // 给$scope添加判断数组的方法，供模板调用
  $scope.isArray = function(value) {
    return Array.isArray(value);
  };
}

关键实现说明 #

• 判断数组的方法：AngularJS的模板无法直接调用全局的Array.isArray，所以我们把这个判断逻辑封装成$scope.isArray方法，方便模板里使用
• 显示控制：
  • 用ng-show控制<select>的显示，当tabObj.foo是数组时展示下拉框
  • 用ng-if控制文本的显示，当tabObj.foo不是数组时展示字段内容
• 下拉框绑定：ng-options="x for x in tabObj.foo"会把数组中的每个元素作为下拉选项，同时用ng-model="selectedOption"绑定选中的值，让交互更完整

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