demo
This is the entire sample 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;//直接转成了数组
});
});Copy after login
Here I introduce The service is used as a constant. The advantage of writing it this way is that it is easy for me to modify.
For how to use the $http service, please refer to my AngularJs (3) Deployed using
<!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 class="panel">
<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
<table class="table table-striped table-condensed">
<thead>
<tr>
<td>Name</td><td>Category</td><td>Price</td><td>expiry</td>
</tr>
</thead>
<tbody>
<tr 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>
</div>
</body>
</html>Copy after login
Running results:
Use filter
Filters are divided into two categories:
1. Filtering of single data
2. Operate the collection.
1. It is relatively simple to operate the data. As shown in the demo, you can format it in {{item | currency}}, etc.
Currency: "f" can filter the price into pounds.
Filter for single data. For the data format you want to filter, use : in the corresponding format character after the filter.
Number: Indicates the reserved decimal places of the data,
2: Set filtering, filter out a certain number from the set.
In the basic demo, I added this:
<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
Limit:<select ng-model="limitValue" ng-options="p for p in limitRange" ></select>
</div>
filter.js中加入了：
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
$scope.limitValue = "";//要是字符串
<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>Copy after login
The function you are writing must be written in success because json is obtained asynchronously data.
Result:
limit: You can adjust the number displayed on the page.
Create filter
AngularJs has two types of filters. First, we can create a filter that formats individual data, for example: the first letter of the output string is capitalized.
Let’s first talk about how to define a filter: The filter is created through module.filter. The general format of creation is:
angular.module("exampleApp") //Indicates getting a module. Filters are created under modules.
.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, corresponding to the corresponding filtering process. The first parameter indicates the object that needs to be formatted, and the second parameter indicates the configuration and the format.
if(angular.isString(value))
{
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
}else
{
return value;
}
}
});Copy after login
##I wrote this into a js file. CustomFilter.js Don’t forget to add it. Now let me change the data:
<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
<script src="customFilter.js"></script>
Copy after login
As mentioned before, if you need to add configuration information, the writing format is filter: option
Of course, the default parameters are also If you don’t write it, it will default to Null value or undefined.
Result:
It’s that simple to customize a filter function for each data processing.
#2. Customize a collection processing function, just like limitTo
<td>{{item.name | labelCase:true}}</td>Copy after login
## html changed part:
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;
}
}
});Copy after login
.
Result: There are six pieces of data in total, and the skip filter was used to pass 2 pieces
. When customizing the filter, I found that a filter has already been defined. I don’t want to define it again. What should I do? We can also create it using the previously created 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 | skip: ">
Copy after login
Result:
##The filter is completed like this. Isn’t it very simple?
Please pay attention to PHP Chinese for more articles on AngularJs learning about filter creation. net!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
