我已经写了一个过滤器函数,它将根据您传递的参数返回数据。我希望在控制器中有相同的功能。是否有可能在控制器中重用过滤器函数?
这是我目前为止尝试过的:
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.
}
当前回答
@Prashanth提供的答案是正确的,但还有更简单的方法来做同样的事情。基本上,不用注入$filter依赖项并使用调用它的笨拙语法($filter('filtername')(arg1,arg2);),而是可以注入依赖项:过滤器名称加上filter后缀。
以问题为例,你可以这样写:
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
需要注意的是,无论你使用什么命名约定,你都必须将Filter附加到过滤器名称后: foo通过调用fooFilter来引用 通过调用fooFilterFilter来引用fooFilter
其他回答
有三种方法可以做到这一点。
让我们假设您有以下简单的过滤器,它将字符串转换为大写,仅为第一个字符提供参数。
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);
});
使用哪一种取决于个人喜好,但我建议使用第三种,因为它是最易读的选项。
在控制器中使用$filter的简单日期示例如下:
var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");
正如这里解释的- https://stackoverflow.com/a/20131782/262140
下面是在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.");
很简单吧?
AngularJs允许你在模板或控制器、指令等内部使用过滤器。
在模板中可以使用此语法
{{ variable | MyFilter: ... : ... }}
在控制器内部,你可以使用注入$filter服务
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
$filter('MyFilter')(arg1, arg2);
})
如果你需要更多的演示例子,这里是一个链接
AngularJs过滤器的例子和演示
似乎没有人提到你可以在$filter('filtername')(arg1,arg2)中使用函数arg2;
例如:
$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});