2

我有一个范围内的对象数组，我用 ng-repeat 循环。我想根据它们的值过滤掉一些元素，但似乎 ng-if 被完全忽略了。

我设置了这个简单的 plunk 来说明：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

4

我想正确的方法是使用过滤器，例如：

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

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

于 2013-11-12T08:43:48.790 回答
1

我已使用以下代码更新了您的 Plunkr 以解决您的问题。

我经常使用两个自定义的角度模块，FilterIncludeIf并为 sUtilCompare提供ng-if类似的功能ng-repeat。

FilterIncludeIfhasUtilCompare作为依赖项并接受两个参数。第一个是字符串形式的比较运算符（">="在您的情况下）。

第二个是一个Object。键应设置为您要比较其值的ng-repeat语句（在下面的示例中）返回的各个对象的键。customer这些值应设置为您要比较的值。

查看example-snippet.html,includeIf最终过滤customers.all并确保customer呈现的唯一 s 是所有以下语句的位置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
    }

});
于 2014-04-22T21:55:17.143 回答
0

我认为你想要的是一个实际的过滤器。

过滤器可以应用于表达式（如重复），并将返回一个列表，其中仅包含满足过滤器条件的项目。所以在这种情况下，我认为你会这样做。

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

请注意，maxAge 不是默认过滤器之一（您可以在此处的左侧找到它们），除非您可以将其放入现有过滤器中，否则您必须自己创建一个。但是创建过滤器真的很容易，它们只是接受输入的函数，执行他们喜欢的任何逻辑，然后返回新值。

于 2013-11-12T08:51:32.357 回答