Angular JS ng-如果在ng-repeat中不起作用

Question

我在作用域中有一系列對象，正在使用ng-repeat遍歷。 我想根據它們的值過濾掉一些元素，但似乎ng-if被完全忽略了。

我設置了這個簡單的插件來說明： http : //plnkr.co/edit/Aj0hpZQTfnkQ6BYG8DRb 。
這是控制器：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.events = [
    {key: "ClassName", value: "exception", age:12},
    {key: "Message", value: "oops", age: 25},
    {key: "Stack", value: null, age: 35}
    ]
});

和HTML模板：

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <ul>
      <li ng-repeat="event in events" ng-if="event.age > 20">
        [{{$index + 1}}] {{event.key}}: {{event.value}} - {{event.age}}
      </li>
    </ul>
  </body>

</html>

應該使用ng-if指令過濾掉數組的第一個元素，無論如何它都會顯示出來。 我錯過了忽略ng-if的哪些內容？

Answer 1

我想正確的方法是使用過濾器，例如：

<li ng-repeat="event in events | filter:greaterThan">

工作示例： http : //plnkr.co/edit/Qy3BVEogEgGivtqel73b?p=preview

Answer 2

我們已經更新您的Plunkr，以使用以下代碼解決您的問題。

我經常使用兩個自定義的角度模塊， FilterIncludeIf和UtilCompare提供ng-if樣的功能， ng-repeat秒。

FilterIncludeIf具有UtilCompare作為依賴項，並接受兩個參數。 第一個是字符串形式的比較運算符（在您的情況下為">=" ）。

第二個是Object 。 鍵應設置為從ng-repeat語句返回的單個對象的鍵（在下面的示例中為customer ），您要比較其值。 值應設置為您要比較的值。

查看example-snippet.html ， includeIf最終過濾了customers.all並確保呈現的唯一customer是以下所有語句均為true 。

customer[firstname] != customers.all.current.data.firstname`
customer[lastname] != customers.all.current.data.lastname`
customer[email] != customers.all.current.data.email`

例如-snippet.html

<li 
    ng-repeat="customer in customers.all | filter:query | includeIf : '!=' : {
        firstname   : customers.current.data.firstname, 
        lastname    : customers.current.data.lastname,
        email       : customers.current.data.email, 
    }" 
    class="tab"
    >
    <div class="info">
        <h4 class="subheader name">
            {{customer.firstname}}&nbsp;{{customer.lastname}}
        </h4>
        {{customer.email}}
    </div>
</li>

篩選-includeIf

angular
.module('FilterIncludeIf', [
    'UtilCompare'
])  
.filter('includeIf', function (compare) {
    return function (items, comparator, attrs) {
        var filteredInput = [];

        for (var i = 0; i < items.length; i++) {
            var item = items[i],
                numOfAttrs = 0,
                numOfMatchedAttrs = 0;
            for (var key in attrs) {
                numOfAttrs++
                var value = attrs[key],
                    comparison = compare
                        .these(item[key], value)
                        .by(comparator)
                        .eval();

                if (comparison) numOfMatchedAttrs++;
            }
            if (numOfAttrs == numOfMatchedAttrs) filteredInput.push(item);
        }

        return filteredInput
    };
});

工廠-比較

angular
.module('UtilCompare', [])
.factory('compare', function () {
    var _by = undefined,
        _a = undefined,
        _b = undefined;

    var comparators = {
        '>'     : function(c, d) { return c > d },
        '<'     : function(c, d) { return c < d },
        '>='    : function(c, d) { return c >= d },
        '<='    : function(c, d) { return c <= d },
        '!='    : function(c, d) { return c != d },
        '!=='   : function(c, d) { return c !== d },
        '=='    : function(c, d) { return c == d },
        '==='   : function(c, d) { return c === d },
    }

    function by (comparator) {
        _by = comparator;
        return this
    }

    function these (a, b) {
        _a = a;
        _b = b;
        return this
    }

    function eval () {
        return comparators[_by](_a, _b);
    }

    return {
        by     : by,
        these  : these,
        eval   : eval
    }

});

Answer 3

我認為您想要的是一個實際的過濾器。

過濾器可以應用於表達式（如重復），並且將返回僅包含滿足過濾器條件的項目的列表。 因此，在這種情況下，我認為您會這樣做。

  <li ng-repeat="event in events | maxAge:20">
    ...
  </li>

請注意，maxAge不是默認過濾器之一（您可以在此處找到左側的過濾器），除非您可以將其放入現有過濾器中，否則必須自行創建一個。 但是創建過濾器確實很容易，它們只是接受輸入的函數，執行它們想做的任何邏輯，然后返回新值。

Angular JS ng-如果在ng-repeat中不起作用

問題描述

3 個解決方案

解決方案1
4 已采納 2013-11-12 08:43:48

解決方案2
1 2014-04-22 21:55:17

解決方案3
0 2013-11-12 08:51:32

Angular JS ng-如果在ng-repeat中不起作用

問題描述

3 個解決方案

解決方案1 4 已采納 2013-11-12 08:43:48

解決方案2 1 2014-04-22 21:55:17

解決方案3 0 2013-11-12 08:51:32

解決方案1
4 已采納 2013-11-12 08:43:48

解決方案2
1 2014-04-22 21:55:17

解決方案3
0 2013-11-12 08:51:32