在AngularJS的ng-if中的表达

时间:2016-05-27 02:51:36

标签: angularjs

考虑以下代码段

ng-if not working

<div class="row">
    <div class="col-md-8">
        <ul>
            <li ng-repeat="bigL in bigLs">
                <span ng-if="isObj(bigL)">{{bigL.note}}</span>
                <ul ng-if="bigL instanceof Array">
                    <li ng-repeat="bigLl in bigL">
                        {{bigLl}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

ng-if working

<div class="row">
    <div class="col-md-8">
        <ul>
            <li ng-repeat="bigL in bigLs">
                <span ng-if="isObj(bigL)">{{bigL.note}}</span>
                <ul ng-if="isArr(bigL)">
                    <li ng-repeat="bigLl in bigL">
                        {{bigLl}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

控制器

$scope.isArr = function(bigL){
        return bigL instanceof Array;
};

我使用ng-if来确定是否需要创建嵌套ul(通过确定数组 bigLs 中的不同数据类型),我遇到的情况是ng-if无法评估 bigL instanceof Array ,然后我将这个片段移动到一个函数中,使用相同的上下文,ng-of工作正常,但仍然无法理解为什么需要将表达式包装在函数内而不是运行它直接在ng-if。

感谢任何澄清,谢谢!

1 个答案:

答案 0 :(得分:1)

我不确定这个问题,但有几件事情在你的代码中有些难闻:

永远不要使用&#39; instanceof Array&#39;它不会在角度表达中工作。

相反,请使用angular.isArray()。这只能通过向您的范围添加方法在javascript中使用。

所以,你想要做这样的事情:

控制器:

...
$scope.hasChildren = function(bigL1) {
  return angular.isArray(bigL1);
} 

模板:

 ...
 <ul ng-if="hasChildren(bigL)">
 ...

作为奖励,对此代码进行单元测试变得更加容易。