Answers:
将$ filter注入控制器
function myCtrl($scope, $filter)
{
}
然后,无论您想在哪里使用该过滤器,都可以像这样使用它:
$filter('filtername');
如果要将参数传递给该过滤器,请使用单独的括号进行处理:
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
arg1
您要过滤的数组在哪里,是用于过滤arg2
的对象。
var anyNumber = $filter('number')(12.222222, 2);
来获取12.22
。
$filter("currency")(price, "$", 2)
因此,如果价格为200,则该表达式将返回“ $ 200.00”。
$filter('filtter1')
(2吨),您不会注意到该错误。但是,如果您注入filtter1Filter
Angular,则会立即抱怨该依赖项不存在。
@Prashanth提供的答案是正确的,但是有更简单的方法可以做到这一点。基本上可以注入$filter
依赖项,而不是注入依赖项并使用笨拙的语法来调用它($filter('filtername')(arg1,arg2);
),即可以注入依赖项:过滤器名称加Filter
后缀。
以这个问题为例可以写:
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
应当注意,Filter
无论使用哪种命名约定,都必须在过滤器名称后附加:调用foo引用foo过滤器fooFilter
调用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>
这是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.");
简单,嘿?
假设您具有以下简单过滤器,该过滤器将字符串转换为大写形式,并且仅将参数用于第一个字符。
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);
});
您会使用哪一种来满足个人喜好,但我建议您使用第三种,因为这是最易读的选项。
我还有另一个示例,是我为过程创建的:
我得到一个带有值描述的数组,像这样
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);
// ....
}
AngularJs允许您在模板内部或Controller,Directive等内部使用过滤器。
在模板中,您可以使用此语法
{{ variable | MyFilter: ... : ... }}
在控制器内部,您可以使用注入$ filter服务
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
$filter('MyFilter')(arg1, arg2);
})
如果您需要有关演示示例的更多信息,请单击此处的链接
评估过滤器的另一种方法是从视图中镜像语法。调用很麻烦,但是您可以为其建立快捷方式。我喜欢字符串的语法与视图中的语法相同。看起来像这样:
function myCtrl($scope, $interpolate) {
$scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
在控制器中使用$ filter的简单日期示例为:
var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");
如此处所述-https: //stackoverflow.com/a/20131782/262140
如果我们要添加多个条件,而不是javascript角度过滤器中的单个值,请使用以下代码:
var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
首先将$ filter注入到控制器中,确保ngSanitize已在您的应用程序中加载,随后在控制器中的用法如下:
$filter('linky')(text, target, attributes)
重用Angular.js过滤器-视图/控制器
该解决方案涵盖了重用角度过滤器。这是过滤数据的另一种方法,当我需要时Google便将我降落在这里。我喜欢分享。
用例
如果您已经在过滤,例如在视图中用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”指定您要进行严格比较。如果省略,则可以在多个列中搜索值。