sum*_*nth 634 angularjs angular-filters ng-controller
我编写了一个过滤函数,它将根据您传递的参数返回数据.我想在我的控制器中使用相同的功能.是否可以在控制器中重用过滤器功能?
这是我到目前为止所尝试的:
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
Run Code Online (Sandbox Code Playgroud)
JSA*_*ict 1038
向控制器注入$ filter
function myCtrl($scope, $filter)
{
}
Run Code Online (Sandbox Code Playgroud)
然后,无论您想要使用哪个过滤器,只需使用它:
$filter('filtername');
Run Code Online (Sandbox Code Playgroud)
如果要将参数传递给该过滤器,请使用单独的括号:
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
Run Code Online (Sandbox Code Playgroud)
arg1
您要过滤的数组在哪里,是用于过滤arg2
的对象.
pko*_*rce 248
@Prashanth提供的答案是正确的,但有更简单的方法可以做到这一点.基本上不是注入$filter
依赖项并使用调用它的笨拙语法($filter('filtername')(arg1,arg2);
),而是可以注入依赖项:filter name加上Filter
后缀.
从一个问题的例子可以写:
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
Run Code Online (Sandbox Code Playgroud)
应该注意的是Filter
,无论您使用什么命名约定,都必须附加到过滤器名称:调用fooFilter
fooFilter引用foo通过调用引用fooFilterFilter
aam*_*jad 78
使用以下示例代码,我们可以按名称过滤角度控制器中的数组.这基于以下描述. 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'});
}]);
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
Mik*_*ill 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.");
Run Code Online (Sandbox Code Playgroud)
简单,嘿?
Jef*_*aal 35
假设您有以下简单过滤器,它将字符串转换为大写,仅包含第一个字符的参数.
app.filter('uppercase', function() {
return function(string, firstCharOnly) {
return (!firstCharOnly)
? string.toUpperCase()
: string.charAt(0).toUpperCase() + string.slice(1);
}
});
Run Code Online (Sandbox Code Playgroud)
直接通过 $filter
app.controller('MyController', function($filter) {
// HELLO
var text = $filter('uppercase')('hello');
// Hello
var text = $filter('uppercase')('hello', true);
});
Run Code Online (Sandbox Code Playgroud)
注意:这使您可以访问所有过滤器.
分配$filter
给variable
此选项允许您使用$filter
类似a function
.
app.controller('MyController', function($filter) {
var uppercaseFilter = $filter('uppercase');
// HELLO
var text = uppercaseFilter('hello');
// Hello
var text = uppercaseFilter('hello', true);
});
Run Code Online (Sandbox Code Playgroud)
仅加载特定的 Filter
您可以通过附加过滤器名称来仅加载特定过滤器Filter
.
app.controller('MyController', function(uppercaseFilter) {
// HELLO
var text = uppercaseFilter('hello');
// Hello
var text = uppercaseFilter('hello', true);
});
Run Code Online (Sandbox Code Playgroud)
您使用哪一个是个人偏好,但我建议使用第三个,因为它是最易读的选项.
小智 15
function ngController($scope,$filter){
$scope.name = "aaaa";
$scope.age = "32";
$scope.result = function(){
return $filter('lowercase')($scope.name);
};
}
Run Code Online (Sandbox Code Playgroud)
控制器方法第二个参数名称应该是"$ filter",那么只有过滤器功能才能用于此示例.在这个例子中,我使用了"小写"过滤器.
小智 12
我有另一个例子,我为我的过程做了:
我得到一个像这样的值 - 描述的数组
states = [{
status: '1',
desc: '\u2713'
}, {
status: '2',
desc: '\u271B'
}]
Run Code Online (Sandbox Code Playgroud)
在我的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';
};
})
Run Code Online (Sandbox Code Playgroud)
然后,测试var(控制器):
function myCtrl($scope, $filter) {
// ....
var resp = $filter('getState')('1', states);
// ....
}
Run Code Online (Sandbox Code Playgroud)
AngularJs允许您在模板内部或Controller,Directive等内部使用过滤器.
在模板中,您可以使用此语法
{{ variable | MyFilter: ... : ... }}
Run Code Online (Sandbox Code Playgroud)
在内部控制器中,您可以使用注入$ filter服务
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
$filter('MyFilter')(arg1, arg2);
})
Run Code Online (Sandbox Code Playgroud)
如果你需要更多的Demo示例,这里有一个链接
还有另一种方法可以评估从视图中反映语法的过滤器.调用是毛茸茸的,但你可以建立一个快捷方式.我喜欢字符串的语法与您在视图中的语法相同.看起来像这样:
function myCtrl($scope, $interpolate) {
$scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
Run Code Online (Sandbox Code Playgroud)
似乎没有人提到可以在$ filter('filtername')(arg1,arg2);中使用arg2函数。
例如:
$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
515962 次 |
最近记录: |