极客教程如何在AngularJS的控制器中使用过滤器
在这篇文章中，我们将看到如何使用AngularJS在控制器中使用过滤器。过滤器用于格式化表达式的值，并将其显示给用户。它可以在HTML预览、控制器或服务以及指令中使用。AngularJS提供了许多内置的过滤器，尽管我们可以轻松地创建和定义自定义过滤器。AngularJS的内置过滤器列表如下。
Built-in filters:
- AngularJS的过滤器。 这个Filter是用来过滤数组和对象元素，并返回过滤后的项目。
- AngularJS货币过滤器。 这个过滤器用于将一个数字转换成货币格式。
- AngularJS数字过滤器。 这个过滤器用于将数字转换为字符串或文本。
- AngularJS日期过滤器。 这个过滤器用于将一个日期转换成指定的格式。
- AngularJS json过滤器。 这个过滤器用于将一个JavaScript对象转换为JSON。
- AngularJS小写字母过滤器：该过滤器用于将一个字符串转换为小写字母。
- AngularJS大写字母过滤器。 这个过滤器用于将一个字符串改为大写的字符串或字母。
- AngularJS limitTo过滤器：该过滤器用于返回一个包含指定数量元素的数组或字符串。
- AngularJS orderBy过滤器。这个过滤器用于将给定的数组排序到特定的顺序。
如果通过使用依赖性currencyFilter.注入一个过滤货币，那么就会出现一个函数。注入的参数是一个函数，它把要格式化的值作为第一个参数，从第二个参数开始过滤参数。以下方式用于实现过滤器。
方法1：在视图模板中使用过滤器
语法:
- 通过对视图模板中的表达式应用过滤器。
{{ expression | filter }}
- 过滤器可以应用于另一个过滤器的结果。这被称为 “链式”。
{{ expression | filter1 | filter2 | ... }}
- 过滤器可以有参数。
{{ expression | filter:argument1:argument2:... }}
例子1：这个例子描述了在AngularJS的控制器内使用过滤器。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body style="text-align: center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
Implementing the Filter inside the Controllerin AngularJS
</h3>
<div ng-app="app1" ng-controller="currencyCtrl">
<h3>Price: {{ price | currency }}</h3> </div>
<script>
var app = angular.module('app1', []);
app.controller('currencyCtrl', function(scope) {
scope.price = 100;
});
</script>
<p>
The currency filter formats a number to a currency format.
</p>
</body>
</html>
输出:
方法2：过滤器被用于指令、服务和控制器中。为了实现这一点，在你的指令/控制器/服务中注入一个带有过滤器名称的依赖关系。
例子2：这是另一个例子，描述了AngularJS中控制器内部过滤器的使用。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body style="text-align: center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
Implementing the Filter inside the Controllerin AngularJS
</h3>
<script>
var listedItems = [{
itemID: 001,
itemName: "Laptop",
stockLeft: 1
}, {
itemID: 002,
itemName: "Cell Phone",
stockLeft: 3
}, {
itemID: 003,
itemName: "Earphones",
stockLeft: 0
}, {
itemID: 004,
itemName: "Chargers",
stockLeft: 5
}, {
itemID: 005,
itemName: "Headphones",
stockLeft: 0
}, {
itemID: 006,
itemName: "USB Cables",
stockLeft: 15
}];
listedItems = listedItems.filter(function(item) {
return(item.stockLeft > 0);
});
// This will display the no of items are in stock
prompt("", "There are "
+ listedItems.length
+ " items left in shop.");
</script>
</body>
</html>
输出:
方法3：它是对第二种方法的修改。过滤器也可以被添加到AngularJS中来格式化数据值。在我们的AngularJS控制器中，有$filter服务。在AngularJS中，你也可以在控制器中注入$filter服务，并可以用下面的语法来使用它的过滤器。
语法:
$filter("filter")(array, expression, compare, propertyKey)
function myCtrl($scope, $filter) {
$scope.finalResult = $filter("filter")(
$scope.objArray, $scope.searchObj);
};
AngularJS有一些内置的过滤器，可以用来根据一些条件减少一个数组的执行或数组的某些点。
$scope.formatDate = $filter("date")($scope.date, "yyyy-MM-dd");
$scope.finalResult = $filter('uppercase')($scope.name);
例子3：在这个例子中，过滤器被添加到指令中，如ng-repeat，通过使用pipe符号或字符|，后面跟一个过滤器标签。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
Implementing the Filter inside the Controller in AngularJS
</h3>
<div ng-app="app1" ng-controller="piprCtrl">
<p>
Looping with obj object created for nameList array:
</p>
<ul>
<li ng-repeat="obj in nameList | orderBy:'city'">
{{ obj.name + ', ' + obj.city }}
</li>
</ul>
</div>
<script>
angular.module("app1", []).controller("piprCtrl",
function(scope) {
scope.nameList = [{
name: "Hardik",
city: "Chandigarh"
}, {
name: "Shekhar",
city: "Dehradun"
}, {
name: "Sanyam",
city: "Chandigarh"
}, {
name: "Poojan",
city: "Dehradun"
}, {
name: "Aman",
city: "Muzaffarnagar"
}, {
name: "Shashank",
city: "Roorkee"
}, {
name: "Shazi",
city: "Lucknow"
}, {
name: "Harshit",
city: "Dehradun"
}, {
name: "Abhishek",
city: "Gangoh"
}];
});
</script>
</body>
</html>
输出:
