如何在控制器中使用过滤器？

Question

如何在控制器中使用过滤器？

659

我编写了一个过滤函数，它将根据您传递的参数返回数据。我希望在我的控制器中实现相同的功能。是否可以在控制器中重用过滤函数？

这是我迄今为止尝试过的：

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

- sumanth

2

更好的答案：https://dev59.com/I2Ij5IYBdhLWcg3wilzB - Raza Ahmed

15个回答

255

@Prashanth提供的答案是正确的，但是实现相同效果的更简单的方法。基本上，可以注入依赖关系：过滤器名称加上Filter后缀，而不是注入$filter依赖并使用调用它的奇怪语法（$filter('filtername')(arg1,arg2);）。

以问题中的示例为例，可以编写以下内容：

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

需要注意的是，无论您使用什么命名约定，都必须将Filter追加到过滤器名称：要调用 fooFilter，则引用 foo 要调用 fooFilterFilter，则引用 fooFilter

- pkozlowski.opensource

38

好的，但我仍然需要找到一个使用情境，你想给一个类注入10个过滤器...这样的类可能会违反单一职责原则... - pkozlowski.opensource

10

只是为了明确，这不是“奇怪的”JS语法...

var fooFilter = $filter('foo');
fooFilter(arg1, arg2);

解释：这段代码是在AngularJS框架中使用$filter服务来获取名为'foo'的过滤器函数，然后使用该函数传入arg1和arg2参数进行过滤。 - blindgaenger

13

@OZ_ 你的意思是什么？它是否有效进行了最小化处理。最小化处理与此无关，请查看此 plunk：http://plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview。 - pkozlowski.opensource

2

这非常适合使用单个过滤器，这正是我遇到的情况。 - Matthew Fotzler

3

我认为 $filter 语法隐藏了依赖关系，因此导致代码难以维护。静态注入筛选器是更好的选择。 - BiAiB

显示剩余4条评论

80

使用以下示例代码，我们可以通过名称在Angular控制器中过滤数组。这是基于以下描述： http://docs.angularjs.org/guide/filter this.filteredArray = filterFilter(this.array, {name:'Igor'}); JS:

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>

- aamir sajjad

4

filterFilter是一个函数名，它被用来过滤数组中的数据。在这个例子中，它会过滤出数组中所有name属性为'Igor'的对象。在代码中，我们可以看到filterFilter是通过依赖注入的方式定义的，在注入时，它被传递了一个字符串'filterFilter'作为名称，以及一个函数作为实现。 - Suraj Rawat

这个技巧的更多示例可以在以下Plnkr中找到：http://plnkr.co/edit/icFurX?p=preview - OzBob

非常有帮助。谢谢。 - Kushal Jayswal

48

以下是在 Angular 控制器中使用 filter 的另一个示例：

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");

很简单，嘿？

- Mike Gledhill

6

这正是我需要的，谢谢。尽管显然这不是问题所在。 :) - pvgoran

40

有三种可能的方法来完成这个任务。

假设你有以下简单的过滤器，它将一个字符串转换为大写，并带有一个参数仅针对第一个字符。

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

直接通过$filter进行筛选。

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

注意：这将使您可以访问所有过滤器。

将$filter分配给一个变量

此选项允许您像使用函数一样使用$filter。

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

仅加载特定的筛选器

您可以通过在筛选器名称后附加Filter来仅加载特定的筛选器。

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

你使用哪种选项是个人偏好，但我建议使用第三个，因为它是最易读的选项。

- Jeffrey Roosendaal

15

function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

控制器方法的第二个参数名称应为“$filter”，这样示例才能使用过滤功能。在此示例中，我使用了“lowercase”过滤器。

控制器方法第二个参数名应该是"$filter"，只有这样示例中的过滤功能才会生效。在这个示例中我使用了"lowercase"过滤器。

- Ipog

12

我有另一个例子，是我为我的流程制作的：

我获得一个像这样带有值-描述的数组

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

在我的Filters.js文件中：

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})

然后，一个测试的变量（控制器）：

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}

- NtSpeed

这个在AngularJS 1.0.8中能用吗？因为我加了控制器，但它还是不起作用，显示$filter未定义。 - shajin

7

AngularJs允许你在模板或控制器、指令等内部使用筛选器。在模板中，您可以使用以下语法：

{{ variable | MyFilter: ... : ... }}

在控制器内部，您可以使用注入$filter服务

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})

如果您需要更多示例，请点击以下链接

AngularJs过滤器示例和演示

- Hazarapet Tunanyan

inceting不是一个单词。您是不是想说injecting？ - kevinc

哦，是的，我的意思是注入。 - Hazarapet Tunanyan

6

还有一种评估过滤器的方法，它与视图中的语法相似。调用可能会很复杂，但你可以构建一个快捷方式来简化操作。我喜欢字符串的语法与视图中完全一致。看起来是这样的：

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

- SimplGy

那实际上非常有用！ - DragonKnight

1

这太棒了，因为它允许我传递一个看起来就像在标记中一样的字符串。 - kevinc

5

似乎没有人提到过，你可以将一个函数作为arg2传入$filter('filtername')(arg1,arg2);

例如：

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});

- pavok

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JSAddict · Accepted Answer

1059

将 $filter 注入到您的控制器中

function myCtrl($scope, $filter)
{
}

然后，无论在哪里想使用该过滤器，只需像这样使用它：

$filter('filtername');

如果你想将参数传递给该过滤器，请使用单独的括号：

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

其中arg1是您要筛选的数组，而arg2是用于筛选的对象。

- JSAddict

21

对不起，先生，我还是不理解。您是否可以制作一个Jsfiddle演示如何定义过滤器函数体以及如何将其插入HTML文件中？ - gm2008

34

您可以使用数字过滤器，例如var anyNumber = $filter('number')(12.222222, 2);以获取12.22。 - vinesh

20

我很乐意回答这个问题……问题是“如何在控制器中使用过滤器？” - Shanimal

9

使用内置的 "currency" 过滤器进行示例: $filter("currency")(price, "$", 2) 因此，如果您拥有价格 = 200，该表达式将返回"$200.00"。 - Netsi1964

2

@pkozlowski.opensource的答案比这个更好，因为它减少了"魔术字符串"。一个好处是，如果这是在一个更复杂的控制器中，并且你没有对使用的过滤器进行单元测试，那么你可能不会注意到错误。如果你使用$filter('filtter1')（2个t），你不会注意到错误。然而，如果你注入filtter1Filter，Angular会立即报错，提示依赖不存在。 - jkjustjoshing

显示剩余7条评论