【问题标题】:ng-if with multiple conditions inside ng-repeat not working as expectedng-if 在 ng-repeat 中有多个条件没有按预期工作
【发布时间】:2015-02-03 12:11:44
【问题描述】:

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

我有一个 key:value 对象设置如下:

{
  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的key和value就不显示了。

如果我只使用value != null 也可以,key4 不会显示。

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

我在这里做错了吗?

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

提前谢谢!

【问题讨论】:

  • 我不会为此发布答案,您所要做的就是替换 ||使用 && ,想想看,你希望两个条件都满足,而不是其中一个。

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


【解决方案1】:

如果你想让两者都消失,它应该是 '&&' 而不是 '||'。 !(key == 'key1' || value == 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>    

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

【讨论】:

  • 谢谢。还有@sylwester,谢谢你的解释:(true || false) = true,忘了!
  • 谢谢。还有@sylwester,你拯救了我的一天。我是这样写的,但它不起作用。 ng-if="key != 'key1' || key == null" 可能与角度解析条件的方式有关
【解决方案2】:

请看下面的演示

一切都很好,只是声明

(true || false) = true

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

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

  $scope.list = {
    key1: "val1",
    key2: "val2",
    key3: "val3",
    key4: null
  };
});
<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>

【讨论】:

    猜你喜欢
    • 2015-11-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-14
    • 2017-08-20
    • 2018-04-24
    • 1970-01-01
    相关资源
    最近更新 更多