In the world of AngularJS, filter provides a way to format data. Angular also provides us with many built-in filters, and it is also quite simple to create custom filters.
In HTML template binding {{}}, we use | to call filters. For example, we want the string to display all capital characters:
{{ name | uppercase }}Of course, we can also use the $filter service in JavaScript to call filters, and use string capitalization as an example:
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari');}]);How to pass parameters to filter? Just put the parameters after the filter and add a colon in the middle (if there are multiple parameters to be passed, add a colon after each parameter). For example, a number filter can help us limit the number of digits. If you want to display two decimal places, add number:2.
{{ 123.456789 | number:2 }}The filter filter is mainly used to filter an array of data and return a new array containing subarray data.
For example, when searching on the client side, we can quickly filter out the results we want from the array.
This filter method receives a string, object, or function parameter to select/remove array elements.
Let's take a look at it in detail:
1. Built-in filter
1, uppercase, lowercase size conversion
{{ "lower cap string" | uppercase }} //Result: LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} //Result: tank is good｜The vertical line here is a pipeline function. If you are familiar with linux, the pipeline function of this part is basically the same as 2, json formatted
{{ {foo: "bar", baz: 23} | json }} //Result: { "foo": "bar", "baz": 23 }Note: Bza has no double quotes before formatting, and it is converted to json data after formatting.
3. Date formatting
mysql timestamp ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"
{{ 1304375948024 | date:'medium'}} //May 03, 2011 06:39:08 PM {{ 1304375948024 | date }} //Result: May 3, 2011 {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //Result: 05/03/2011 @ 6:39AM {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //Result: 2011-05-03 06:39:084. Number formatting
{{ 1.234567 | number:1 }} //Result: 1.2 {{ 1234567 | number }} //Result: 1,234,5675. Currency currency formatting
{{ 250 | currency }} //Result: $250.00 {{ 250 | currency:"RMB ￥ " }} //Result: RMB ￥ 250.006. Filter search can only check value, not key
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:'s'}} //Find rows with s//The result of the above example: [{"age":12,"id":11,"name":"sunm xing"}, {"age":44,"id":12,"name":"test abc"}] {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'ip'} }} //Find the line of name like ip //The result of the above example:[{"age":20,"id":10,"name":"iphone"}] $filter('number')(30000, 2); var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])7. limitTo string, object intercept
{{ "i love tank" | limitTo:6 }} //Result: i love {{ "i love tank" | limitTo:-4 }} //Result: tank {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }} //Result: [{"age":20,"id":10,"name":"iphone"}]8. OrderBy object sorting
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} // Root id descending order {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }} //Sorted {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:['-age','name'] }}2. Custom filter function
The customization method of filter is also very simple. Use the filter method of module to return a function that receives the input value and returns the processed result.
app.filter('filter name',function(){ return function(object that needs to be filtered, filter parameter 1, filter parameter 2,...){ //...do some things return the processed object; } });I found a basic angularjs mvc framework, phonecat, and custom filter, which is also written on this basis. This framework is very useful.
filters.js add a module
angular.module('tanktest', []).filter('tankreplace', function() { return function(input) { return input.replace(/tank/, "======") }; });Called in html
{{ "TANK is GOOD" | lowercase |tankreplace}} //Result: ===== is goodNote: | lowercase | tankreplace pipeline commands can have multiple
yourApp.filter('orderObjectBy', function() { return function(items, field, reverse) { var filtered = []; angular.forEach(items, function(item) { filtered.push(item); }); filtered.sort(function (a, b) { return (a[field] > b[field] ? 1 : -1); }); if(reverse) filtered.reverse(); return filtered; }; });This filter converts the object into a standard array and sorts it by the fields you specify. You can use the orderObjectBy filter to resemble ORDERBY, including a boolean value after the field name, in the specified order whether it should be reversed. In other words, the fake is ascending order, the real decline. html call
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>Sort Search
<input type="text" ng-model="search" placeholder="Search"> <thead> <tr> <!-- ng-class="{dropup:true}" --> <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"> Product number<span ng-class="{orderColor: orderType === 'id'}"></span> </th> <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> Product name<span ng-class="{orderColor: orderType === 'name'}"></span> </th> <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> Product price <span ng-class="{orderColor: orderType === 'price'}"></span> </th> </tr> </thead> <tbody> <ttr ng-repeat="item in productData | filter: search | orderBy:order + orderType"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price | currency: '￥'}}</td> </tr> </tbody>angularjs
//Default sorting field $scope.orderType = 'id'; $scope.order = '-'; $scope.changeOrder = function(type) { console.log(type); $scope.orderType = type; if ($scope.order === '') { $scope.order = '-'; }else{ $scope.order = ''; } }