javascript - ng-show isArray 表达式

Question

我只想在模型字段为数组时呈现 select 标记。我有这段代码:

HTML:

<div ng-app>
  <div ng-controller="showCrtl">
        <button class="" ng-click="showCon()">Button1</button>   
        <select ng-show="isArray(tabObj.foo)" ng-model="tabObj.foo" ng-options="x for x in tabObj.foo"></select>
        <span ng-if="!isArray(tabObj.foo)">{{tabObj.foo}}</span>
    </div>
</div>

JS:

function showCrtl($scope){
    $scope.showCon=function(){
        $scope.tabObj={'foo':['AA','BB']};
        alert("is field is Array? "+Array.isArray($scope.tabObj.foo));
    }
}

演示:http://jsfiddle.net/8Yz7S/722/

如您所见，单击按钮后，我只得到 span 和 tabObj.foo 作为文本。 如何获取select标签？

---

如果我将 tabObj.foo 值更改为简单字符串 ('abc') 并使用 ng-show="tabObj.foo.length > 0" 检查我总是得到 select 标签(看不到 span)- 参见 http://jsfiddle.net/8Yz7S/726/

Answer 1

您的 ng-show="isArray(tabObj.foo)" 在 html 中不能像这样直接工作。您可以再创建一个变量并检查其值。

function showCrtl($scope){
$scope.test=false;
    $scope.showCon=function(){
           $scope.tabObj={'foo':['AA','BB']};
           $scope.test=Array.isArray($scope.tabObj.foo);
           alert("is field is Array? "+$scope.test);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="showCrtl">
            <button class="" ng-click="showCon()">Button1</button>   
            <select ng-if="test" ng-model="tabObj.foo" ng-options="x for x in tabObj.foo">
            </select>
            <span ng-if="!test">{{tabObj.foo}}</span>
    </div>
</div>