我编写了一个过滤器函数，它将根据您传递的参数返回数据。我希望我的控制器具有相同的功能。是否可以在控制器中重用过滤器功能？
这是我迄今为止尝试过的：
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
问问题
542101 次
15 回答
1056
将$filter注入您的控制器
function myCtrl($scope, $filter)
{
}
然后，无论您想在哪里使用该过滤器，都可以像这样使用它：
$filter('filtername');
如果要将参数传递给该过滤器，请使用单独的括号：
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
arg1您要过滤的数组在哪里，并且arg2是用于过滤的对象。
于 2013-01-13T09:42:20.110 回答
255
@Prashanth 提供的答案是正确的，但还有更简单的方法可以做到这一点。基本上，与其注入$filter依赖项并使用笨拙的调用它的语法（$filter('filtername')(arg1,arg2);），不如注入依赖项：过滤器名称加上Filter后缀。
以一个可以写的问题为例：
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
应该注意的是Filter，无论您使用什么命名约定，都必须附加到过滤器名称： foo 通过调用引用fooFilter
fooFilter 通过调用引用fooFilterFilter
于 2013-01-13T12:19:23.637 回答
80
使用以下示例代码，我们可以按名称过滤角度控制器中的数组。这是基于以下描述。 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>
于 2014-03-28T04:22:05.167 回答
48
filter这是在 Angular 控制器中使用的另一个示例：
$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.");
很简单，嘿？
于 2015-09-09T12:22:21.157 回答
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给一个variable
此选项允许您使用$filter类似function.
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);
});
您使用哪一个取决于个人喜好，但我建议使用第三个，因为它是最易读的选项。
于 2016-02-16T15:43:56.143 回答
15
function ngController($scope,$filter){
$scope.name = "aaaa";
$scope.age = "32";
$scope.result = function(){
return $filter('lowercase')($scope.name);
};
}
控制器方法的第二个参数名称应该是“$filter”，那么只有过滤器功能才能用于这个例子。在这个例子中，我使用了“小写”过滤器。
于 2014-11-16T03:18:50.563 回答
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);
// ....
}
于 2013-05-28T18:18:17.710 回答
7
AngularJs 允许您在模板或控制器、指令等内部使用过滤器。
在模板中，您可以使用此语法
{{ variable | MyFilter: ... : ... }}
在控制器内部，您可以使用注入$filter服务
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
$filter('MyFilter')(arg1, arg2);
})
如果您需要更多演示示例，这里是一个链接
于 2016-05-17T18:00:42.207 回答
6
还有另一种评估过滤器的方法，它反映了视图中的语法。调用很麻烦，但您可以为它建立一个快捷方式。我喜欢字符串的语法与您在视图中的语法相同。看起来像这样：
function myCtrl($scope, $interpolate) {
$scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
于 2014-03-21T17:35:13.973 回答
5
似乎没有人提到您可以在$filter('filtername')(arg1,arg2);中使用函数作为arg2 ；
例如：
$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
于 2017-06-08T14:09:33.517 回答
2
在控制器中使用 $filter 的简单日期示例是：
var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");
于 2016-12-25T05:35:43.777 回答
1
如果我们想添加多个条件，而不是 javascript 角度过滤器中的单个值，请使用以下代码：
var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
于 2017-11-29T10:16:20.750 回答
1
首先将 $filter 注入您的控制器，确保 ngSanitize 已加载到您的应用程序中，稍后在控制器中使用如下：
$filter('linky')(text, target, attributes)
于 2018-03-07T03:38:12.953 回答
1
如果你想过滤控制器中的对象试试这个
var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
return obj;
});
这将根据if 条件返回过滤后的对象
于 2018-11-16T09:13:08.070 回答
0
重用 Angular.js 过滤器 - 视图/控制器
此解决方案涵盖重用 Angular 过滤器。这是另一种过滤数据的方法，当我需要时，谷歌将我带到了这里；我喜欢分享。
用例
如果您已经在过滤，比如说在您的视图中的 ng-repeat（如下所示），那么您可能已经在控制器中定义了一个过滤器，如下所示。然后你可以像最后的例子一样重用。
过滤器使用示例 - 在视图中过滤重复
<div ng-app="someApp" ng-controller="someController">
<h2>Duplicates</h2>
<table class="table table-striped table-light table-bordered-light">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in data | filter: searchDuplicate:true">
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
</tbody>
</table>
</div>
角度过滤器定义示例
angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {
$scope.people = [{name: 'Bob', gender: 'male' , hasDuplicate: true },
{name: 'Bob', gender: 'male' , hasDuplicate: true },
{name: 'Bob', gender: 'female', hasDuplicate: false}];
$scope.searchDuplicate = { hasDuplicate : true };
})
所以，这里的概念是你已经在使用为你的视图创建的过滤器，然后意识到你也想在你的控制器中使用它。
在控制器示例 1 中使用过滤器函数
var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)
在控制器示例 2 中使用过滤器函数
仅在未找到重复项时才显示按钮，使用先前的过滤器。
HTML 按钮
<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>
显示/隐藏按钮
$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };
有些人可能会发现这个版本的过滤很容易，它是一个 Angular.js 选项。
在视图和 $filter 函数调用中使用的可选比较器参数“true”指定您需要严格比较。如果省略，则可以在多个列中搜索值。
于 2020-05-20T23:06:57.773 回答