我已经写了一个过滤器函数,它将根据您传递的参数返回数据。我希望在控制器中有相同的功能。是否有可能在控制器中重用过滤器函数?
这是我目前为止尝试过的:
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
我已经写了一个过滤器函数,它将根据您传递的参数返回数据。我希望在控制器中有相同的功能。是否有可能在控制器中重用过滤器函数?
这是我目前为止尝试过的:
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
当前回答
似乎没有人提到你可以在$filter('filtername')(arg1,arg2)中使用函数arg2;
例如:
$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
其他回答
AngularJs允许你在模板或控制器、指令等内部使用过滤器。
在模板中可以使用此语法
{{ variable | MyFilter: ... : ... }}
在控制器内部,你可以使用注入$filter服务
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
$filter('MyFilter')(arg1, arg2);
})
如果你需要更多的演示例子,这里是一个链接
AngularJs过滤器的例子和演示
有三种方法可以做到这一点。
让我们假设您有以下简单的过滤器,它将字符串转换为大写,仅为第一个字符提供参数。
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);
});
使用哪一种取决于个人喜好,但我建议使用第三种,因为它是最易读的选项。
重用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
首先注入$filter到你的控制器中,确保ngSanitize被加载到你的应用中,随后在控制器中使用如下:
$filter('linky')(text, target, attributes)
经常查看angularjs的文档
function ngController($scope,$filter){
$scope.name = "aaaa";
$scope.age = "32";
$scope.result = function(){
return $filter('lowercase')($scope.name);
};
}
控制器方法的第二个参数名称应该是“$filter”,那么只有过滤器功能将适用于这个例子。在这个例子中,我使用了“小写”过滤器。