如何使角度过滤器可定制以及如何在 javascript 中使用它们答案

【问题标题】：how to make angular filters customizable and how to use them in javascript如何使角度过滤器可定制以及如何在 javascript 中使用它们
【发布时间】：2013-04-21 17:41:51
【问题描述】：

我的控制器上有一个数组

$scope.arr = [......], a

在 html 中我想做的事

ng-repeat = "item in arr | color:'blue'" //this line works, filter done in the app.filter way.

其中颜色是 arr 中所有对象的属性。

我如何使这种颜色：'blue' 可自定义和子颜色：'red'？

如果我想进行控制器过滤而不是html，语法是什么，现在我有

$scope.filteredArr = $filter('color')($scope.arr,'blue');

出错了

http://jsfiddle.net/x3azn/YpMKX/

已发布小提琴，请删除-1

【问题讨论】：

你能分享一些实时代码吗（在 plunker 或 jsFiddle 中）。您的问题可能有一个非常简单的答案，但根据您的描述和有限的代码量，很难提供帮助。
“这给出了错误”。你为什么不在这里发布错误？这真的很有帮助。
谢谢你，我确信它很简单，我似乎无法在 ng org 上找到我的解决方案

标签： filter angularjs controller

【解决方案1】：

您可以使用filter:expression 格式的任何表达式自定义color:'blue'，因此如果color 过滤器已定义且myColor 存在于当前范围内，则color:myColor 之类的内容可以正常工作。

在您的控制器中，您也可以这样做。

$scope.filteredArr = $filter('color')($scope.arr,myColor);

这是一个基于您的 jsFiddle 示例的示例。

Javascript：

angular.module('app', [])
    .filter('eyecolor', function () {
        return function ( people, color ) {
            var arr = [];
            for ( var i = people.length; i--; ) {
                if ( people[i].eyeColor === color ) {
                    arr.push( people[i] );
                }
            }
            return arr;
        }
    })
    .controller('ctrl', function ($scope, $filter) {
        $scope.desiredColor = 'Brown';
        $scope.people = [
            {       
                name: 'Bob',
                eyeColor: 'Brown'
            }, {
                name: 'Katherine',
                eyeColor: 'Yellow'
            }, {
                name: 'Chun',
                eyeColor: 'Black'
            }
        ];
        $scope.peopleFilter = $filter('eyecolor')( $scope.people, $scope.desiredColor );
    });

HTML:

<div ng-app="app">
    <div ng-controller="ctrl">Color Desired:
        <input ng-model="desiredColor" /><br/>        
        <div ng-repeat="person in people | eyecolor: desiredColor">
            HTML filter: {{person.name}} has eye color {{person.eyeColor}}</div>
        <div ng-repeat="person in peopleFilter">
            Controller filter: {{ person.name }} has eye color {{ person.eyeColor }}</div>
    </div>
</div>

【讨论】：