demo
Here is the whole example demo
1. filter.js file
angular.module("exampleApp", []).constant("productsUrl", "http://localhost:/products").controller("defaultCtrl", function ($scope, $http, productsUrl) {$http.get(productsUrl).success(function (data) {$scope.products = data;//Directly converted to array});});Here I use the introduced service as a constant, and the advantage of writing this is that I can easily modify it.
For how to use the $http service, please refer to my AngularJs (III) Deployed
<!DOCTYPE html><html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-"/><title></title><script src="angular.js"></script><link href="bootstrap-theme.css" rel="stylesheet" /><link href="bootstrap.css" rel="stylesheet" /><script src="filter.js"></script></head><body ng-controller="defaultCtrl" ><div><div><h>Products</h></div><table><thead><tr><td>Name</td><td>Category</td><td>Price</td><td>expiry</td></tr></thead><tbody><ttr ng-repeat="item in products"><td>{{item.name | uppercase}}</td><td>{{item.category}}</td><td>{{item.price | currency}}</td><td>{{item.expiry| number }}</td><td>{{item | json}}</td></tr></tbody></table></div></body></html>Results of the run:
Use filter
Filters are divided into two categories:
1. Filtering individual data
2. Operate on the set.
1. It is relatively simple to operate the data . As shown on the demo, it can be formatted in {{item | currency}}, etc.
currency: "f" can be the price filtered into pounds.
A single data filter wants to filter the data format, after the filter: in the corresponding format character.
number: represents the data decimal places reserved.
2: Collection filtering , filtering out a certain number from the collection.
In the basic demo, I added this:
<div><h>Products</h></div><div>Limit:<select ng-model="limitValue" ng-options="p for p in limitRange" ></select></div> filter.js has been added: $http.get(productsUrl).success(function (data) {$scope.products = data;//Directly converted to array $scope.limitValue = "";//If it is a string <span style="background-color: rgb(, , );"> $scope.limitRange = [];for (var i = ; i <= $scope.products.length; i++) {$scope.limitRange.push(i.toString());<span style="background-color: rgb(, , );"> }</span></span>}); <tr ng-repeat="item in products|limitTo:limitValue"><td>{{item.name | uppercase}}</td><td>{{item.category}}</td><td>{{item.price | currency}}</td><td>{{item.expiry| number }}</td><td>{{item | json}}</td></tr> <span style="line-height: .; font-family: verdana, Arial, Helvetica, sans-serif; font-size: px; background-color: rgb(, , );"> </span>When writing functions, you must be written in success because json data is obtained asynchronously.
result:
limit: You can adjust the number of displayed on the page.
Create filter
AngularJs has two filters. First, we can create filters that format individual data, such as: the output string first letter capitalization.
Let’s first talk about how to define a filter: The filter is created through module.filter, and the general format of the creation is:
angular.module("exampleApp")// means to obtain a module. The filter is created under the module.
.filter("labelCase", function () { //Receive two parameters, the first parameter represents the name of the filter, and the second is a factory function
return function (value, reverse) { //Return a worker function to filter the corresponding filtering process. The first parameter indicates the object that needs to be formatted, and the second parameter indicates the configuration and what format to follow.
if(angular.isString(value)){var intermediate = reverse ? value.toUpperCase() : value.toLowerCase(); return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());}else{return value;}}});I wrote this into a js file. customFilter.js Don't forget to add it.
<link href="bootstrap.css" rel="stylesheet" /><script src="filter.js"></script><script src="customFilter.js"></script>
OK Now I'll change the data:
<td>{{item.name | labelCase:true}}</td>As mentioned earlier, if you need to add configuration information, the writing format is filter: option
Of course, the default parameters can be not written, and the default value will be given Null or undefined.
result:
It is that simple to customize a filter function for processing each data.
2. Customize the functions processed by a collection, just like limitTo.
angular.module("exampleApp").filter("labelCase", function () {return function (value, reverse) {if (angular.isString(value)) {var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());} else {return value;}}}).filter("skip", function () {return function(data,count){if (angular.isArray(data) && angular.isNumber(count)) {if(data.length<count || count<){return data;}else{return data.slice(count);}} else {return data;}}});The html modified part:
<tr ng-repeat="item in products | skip: ">
Results: There are a total of six pieces of data, and 2 pieces were passed by using a skip filter.
When customizing the filter, I found that a filter has been defined. I don’t want to repeatedly define it. What should I do? We can also use a created filter to create it.
angular.module("exampleApp").filter("labelCase", function () {return function (value, reverse) {if (angular.isString(value)) {var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());} else {return value;}}}).filter("skip", function () {return function (data, count) {if (angular.isArray(data) && angular.isNumber(count)) {if (data.length < count || count < ) {return data;} else {return data.slice(count);}} else {return data;}}}).filter("take", function ($filter) {//You can see that I reference the built-in service of AngularJs in the factory function. return function (data, skipcount, takecount) {//You can see if I pass three parameters here? var skipdata = $filter('skip')(data, skipcount);//Are you confused about this writing? Functional programming. return $filter("limitTo")(skipdata, takecount);//limitTo is a built-in filter. }});$filter('skip') calls the skip filter, because it returns a function, so we can continue to pass parameters.
<tr ng-repeat="item in products | take::">
result:
That's how the filter is done. Isn't it very simple?