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

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

这是我目前为止尝试过的:

function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
546783 次浏览
小开
最佳答案

注入美元的过滤器到你的控制器

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
来引用 fooFilter通过调用fooFilterFilter

来引用
小开

我还有另外一个例子，是我在我的过程中做的:

我得到一个像这样有value-Description的数组

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);
// ....
}
小开

还有另一种方法来计算从视图中镜像语法的过滤器。调用是复杂的，但您可以构建到它的快捷方式。我喜欢这个字符串的语法和视图中的是一样的。看起来是这样的:

function myCtrl($scope, $interpolate) {
$scope.$eval($interpolate( "\{\{ myvar * 10 | currency }} dollars." ))
}
小开
使用下面的示例代码，我们可以通过名称过滤angular控制器中的数组。这是基于下面的描述。 # EYZ0 < / p >

这一点。filteredArray = filterFilter数组,{名称:“伊戈尔”});

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

超文本标记语言

<!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>
小开 
function ngController($scope,$filter){
$scope.name = "aaaa";
$scope.age = "32";


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

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

小开

下面是在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);


});

使用哪一种取决于个人喜好，但我建议使用第三种，因为它是最易读的选项。

小开

AngularJs允许你在模板或控制器、指令等内部使用过滤器。

在模板中可以使用此语法

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

和内部控制器，你可以使用注入美元的过滤器服务

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

如果你需要更多的演示例子，这里是一个链接

AngularJs过滤器的例子和演示

小开

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

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

正如这里所解释的- https://stackoverflow.com/a/20131782/262140

小开

似乎没有人提到过可以在过滤器(filtername) (__arg1、最长);中使用最长函数

例如:

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

如果我们想在javascript角过滤器中添加多个条件，而不是单个值，请使用下面的代码:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
小开

首先注入$filter到你的控制器中，确保ngSanitize被加载到你的应用中，随后在控制器中使用如下:

$filter('linky')(text, target, attributes)

总是检查angularjs的文档

小开

如果你想在控制器中过滤器对象，试试这个

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
return obj;
});

这将返回根据如果条件筛选的对象

小开

重用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过滤器定义示例

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

这里的概念是，你已经在使用为视图创建的过滤器，然后意识到你也想在控制器中使用它。

在控制器内使用Filter函数示例1

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

例2:在控制器中使用Filter函数

使用优先筛选器，仅在没有找到重复项时显示按钮。

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”指定需要严格比较。如果省略，则可以在多个列中搜索值。

https://docs.angularjs.org/api/ng/filter/filter


提交答案