ng-if在ng-repeat内有多个条件不能按预期工作

时间:2015-02-03 12:11:44

标签: angularjs angularjs-directive angularjs-ng-repeat angular-ng-if

除非我弄错了,否则我会遇到一些应该有效的问题。

我有一个键:值对象设置如下:

{
  key1:"val1",
  key2:"val2",
  key3:"val3",
  key4:null
}

在我看来,我有这个:

<div class="col-md-4" ng-repeat="(key, value) in list" ng-if="key != 'key1' || value != null">
            <ul>
                <li>{{ key }} : {{ value }} </li>
            </ul>
        </div>

问题: 如果我只使用key != 'key1'作品,则不会显示key1的键和值。

如果我只使用value != null,则不显示key4。

但是当我将if语句与||结合使用时(OR),忽略整个if语句。

我在这里做错了吗?

我在这里发布了一个示例:http://jsfiddle.net/caxoyud2/

提前Thanx!

2 个答案:

答案 0 :(得分:11)

如果你想要两者都消失它应该是'&amp;&amp;'而不是'||'。 !(key =='key1'|| value == null),当在'||'内部取消时成为'&amp;&amp;'。

<div class="col-md-4" ng-repeat="(key, value) in list" ng-if="key != 'key1' &&     value != null">
        <ul>
            <li>{{ key }} : {{ value }} </li>
        </ul>
</div>    

OR

<div class="col-md-4" ng-repeat="(key, value) in list" ng-if="!(key == 'key1' || value == null)">
    <ul>
        <li>{{ key }} : {{ value }}</li>
    </ul>
</div>

答案 1 :(得分:0)

请参阅下面的演示

一切都很好,只是陈述

(true || false) = true

&#13;
&#13;
var someModule = angular.module('myModule', []);

someModule.controller('someControler', function($scope) {

  $scope.list = {
    key1: "val1",
    key2: "val2",
    key3: "val3",
    key4: null
  };
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myModule">
  <div ng-controller="someControler">
    <div class="col-md-4" ng-repeat="(key, value) in list" ng-if="!(key != 'key1' && value != null)">
      <ul>
        <li>{{ key }} : {{ value }}</li>
      </ul>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;