Question

我尝试创建基于文本框的ng-repeat结果过滤。虽然没有列出错误，但过滤不起作用。这里缺少什么？

进行以下更改后更新了代码：

<tbody ng-repeat="objReview in reviewsList | myCustomFilter:criteria" >

过滤器每行调用两次gettiing。如何只打一次电话？

代码

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.js"></script>
    <style type="text/CSS">
        table
        {border-collapse: collapse;width: 100%;}
        th, td
        {text-align: left;padding: 8px;}
        tr:nth-child(even)
        {background-color: #f2f2f2;}
        th
        {background-color: #4CAF50;color: white;}
    </style>
    <script type="text/javascript">
        //defining module
        var app = angular.module('myApp', ['ngResource']);

        //defining factory
        app.factory('reviewsFactory', function ($resource) {
            return $resource('https://api.mlab.com/api/1/databases/humanresource/collections/Reviews',
                    { apiKey: 'myKey' }
                  );
        });

        //defining controller
        app.controller('myController', function ($scope, reviewsFactory) 
    {


         $scope.criteria = "";
     $scope.reviewsList = reviewsFactory.query();

        });

    app.filter('myCustomFilter', function () 
    {

        return function (input, criteria) 
        {

        var output = [];

            if (!criteria || criteria==="") 
        {

            output = input;
            }
            else 
        {
                  angular.forEach(input, function (item) 
          {
                    alert(item.name);
            //alert(item.name.indexOf(criteria));

            //If name starts with the criteria
            if (item.name.indexOf(criteria) == 0) 
            {
                            output.push(item)
                    }
                  });
            }
            return output;
        }
    });

    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">

    <label>
        SEARCH FOR: <input type="text" ng-model="criteria">
    </label>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Review Date</th>
                </tr>
            </thead>
            <tbody ng-repeat="objReview in reviewsList | myCustomFilter:criteria" >
                <tr>
                    <td>{{objReview.name}}</td>
                    <td>{{objReview.createdOnDate}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

进一步阅读

Answer 1

如Lex的评论中所述，您只需要删除前缀“过滤器”，因此请更改

<tbody ng-repeat="objReview in reviewsList | filter:myCustomFilter:criteria" >

到

<tbody ng-repeat="objReview in reviewsList | myCustomFilter:criteria" >

此外，您应该为控制器的属性criteria设置一个初始值，否则您的初始列表将为空，因为您的过滤器将不匹配，因为比较运算符===采用操作数'在您首次在文本框中输入内容之前，帐户类型和critiera将为undefined。

app.controller('myController', function ($scope, reviewsFactory) 
{
    $scope.criteria = '';
    $scope.reviewsList = reviewsFactory.data();
});

过滤ng-repeat结果集无效

1 个答案: