2

スコープ内にオブジェクトの配列があり、これを 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を無視するものを見逃しましたか?

4

3 に答える 3

1

以下のコードを使用して問題を解決するために、Plunkr を更新しました。

私は頻繁に 2 つのカスタム angular モジュールを使用FilterIncludeIfし、 に似た機能をUtilCompare提供します。ng-ifng-repeat

FilterIncludeIf依存関係がUtilCompareあり、2 つの引数を取ります。最初は文字列形式の比較演算子です（">="あなたの場合）。

2 つ目は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`

example-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
    }

});
于 2014-04-22T21:55:17.143 に答える