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;//直接转成了数组 }); });
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>
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>
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; } } });
##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>
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>
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; } } });
. 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: ">