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

我写了一个过滤器函数,它会根据你传递的参数返回数据。 我想在我的控制器相同的功能。 是否有可能在控制器中重用过滤器功能?

这是我迄今为止所尝试的:

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

$过滤器注入您的控制器

 function myCtrl($scope, $filter) { } 

然后,无论你想使用该过滤器,只要使用它就像这样:

 $filter('filtername'); 

如果要将参数传递给该过滤器,请使用单独的括号进行操作:

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

其中, arg1是要过滤的数组,而arg2是用于过滤的对象。

@Prashanth提供的答案是正确的,但是还有更简单的方法。 基本上,而不是注入$filter依赖和使用尴尬的语法调用它( $filter('filtername')(arg1,arg2); )可以注入依赖是:过滤器名称加上Filter后缀。

以下面这个问题为例:

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

应该注意的是,无论使用什么命名约定,您都必须将Filter附加到过滤器名称:foo通过调用fooFilter
通过调用fooFilterFilter来引用fooFilterFilter

使用下面的示例代码,我们可以通过名称在角度控制器中过滤数组 这是基于以下描述。 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> 

以下是在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."); 

简单,嘿?

有三种可能的方法来做到这一点。

假设您有以下简单的过滤器,它将字符串转换为大写字母,只有第一个字符的参数。

 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分配给一个variable

这个选项允许你像使用function一样使用$filter

 app.controller('MyController', function($filter) { var uppercaseFilter = $filter('uppercase'); // HELLO var text = uppercaseFilter('hello'); // Hello var text = uppercaseFilter('hello', true); }); 

仅加载特定的Filter

您只能通过将过滤器名称附加到过滤器来加载特定的过滤Filter

 app.controller('MyController', function(uppercaseFilter) { // HELLO var text = uppercaseFilter('hello'); // Hello var text = uppercaseFilter('hello', true); }); 

你使用哪一个是个人喜好,但我建议使用第三个,因为这是最可读的选项。

 function ngController($scope,$filter){ $scope.name = "aaaa"; $scope.age = "32"; $scope.result = function(){ return $filter('lowercase')($scope.name); }; } 

控制器方法第二个参数名称应该是“$ filter”,那么只有过滤器功能可以用于这个例子。 在这个例子中,我使用了“小写”过滤器。

我还有另外一个例子,是我为自己的过程所做的:

我得到一个像这样的值描述的数组

 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'; }; }) 

然后,一个测试var(控制器):

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

AngularJs让你使用模板内或Controller,Directive等内部的过滤器。

在模板中,你可以使用这个语法

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

和内部控制器,您可以使用注入$筛选服务

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

如果你需要更多的Demo示例,这里是一个链接

AngularJs过滤器的例子和演示

还有另一种方法来评估过滤器,从视图中反映语法。 调用是毛茸茸的,但你可以建立一个捷径。 我喜欢这个字符串的语法和你在视图中的相同。 看起来像这样:

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

看来没有人提到你可以在$ filter('filtername')(arg1,arg2)中使用一个函数作为arg2

例如:

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

在控制器中使用$ filter的简单日期示例是:

 var myDate = new Date(); $scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd"); 

如此处所述 – https://stackoverflow.com/a/20131782/262140

Interesting Posts