Question

在AngularJS中，如何将参数传递给自定义过滤器功能？在这种情况下，我需要在过滤器函数中使用task和status。

但Angular仅注入task。如何添加status？

HTML

<div ng-repeat="status in statuses">
    Selected Status: {{ status.title }
    <ul>
        <li ng-repeat="task in tasks | filter:customFilter">
            Task Status: {{ task.status }
        </li>
    </ul>
</div>

JS

$scope.customFilter = function( task, status ) 
{
    // use task and status to show only those tasks that have the selected status
};

我已经尝试了<li ng-repeat="task in tasks | filter:customFilter( task, status )">但是没有用。

Answer 1

要将多个参数传递到过滤器，您只需要用冒号分隔它们。在使用过滤器功能的情况下，您只需将现有过滤器功能包装在自定义过滤器中。

app.filter('customFilterName', ['$filter', function ($filter) {
    var standardFilter = $filter('filter');
    return function (tasks, status) {
        return standardFilter(tasks, function (task) {
            // use task and status to show only those tasks that have the selected status
        });
    };
}]);

第一行是过滤器工厂功能的定义。第二行加载标准过滤器过滤器（我知道愚蠢的命名）。第三行是我们创建的实际过滤函数的定义，在第四行我们包装现有过滤器来处理我们的输入。

表面上有点复杂，但它使视图中的内容更具可读性，使用自定义命名过滤器和参数，并且它除去了指定对象作为参数的许多样板。

在你看来：

<div ng-repeat="status in statuses">
    Status = {{ status.title }
    <ul>
        <li ng-repeat="task in tasks | customFilterName:status">
        </li>
    </ul>
</div>

Answer 2

修改我原来说 - 你不必用$ filter包装你的函数 - 它应该按原样运行。要获得外部范围，请使用$parent。 - 这是不正确的。父范围应在第二个ng-repeat内可访问。另外，为了传递多个参数，应该调用angular的本地filter，如前面的答案所述。：

app.filter('realFilter', function(){ return function(itemArray, param){ var filteredList=[]; console.log(param); for (var i in itemArray){ if (itemArray[i].statum == param){ filteredList.push(itemArray[i]); } } return filteredList; } })

HTML：

<li ng-repeat="task in tasks | realFilter:status.status"> Task Status: {{ task.statum }} </li>

Here's the plunk

过滤功能的参数

2 个答案: