AngularJS filter usage example analysis

The examples in this article describe the usage of AngularJS filter. Share it with everyone for your reference, the details are as follows:

In this section we will take a look at the filter of angularjs.

In our development, the information that needs to be displayed to the user on the page needs to be formatted before it can be displayed to the user. For example, time localization, or yyyy-MM-dd HH:mm:ss format, digital precision formatting, localization, name formatting, etc. Angularjs provides us with a command called filter, which allows us to easily perform a series of functions. Angularjs provides us with many built-in filters such as number. And we can easily customize our own field filters.

The following example:

html:

<div ng-app="app" ng-controller="test">
num:<input ng-model="num" />
<br/>
{{num | number}}
<br/>
{{num | number:2}}
<br/>
first name:<input ng-model="person.first"/>
<br/>
last name:<input ng-model="person.last"/>
<br/>
name: {{person | fullname}}
  <br/>
name: {{person | fullname:"- -"}}
    <br/>
name: {{person | fullname:" " | uppercase }}
</div>

js:

function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
  var filterfun = function(person, sep) {
    sep = sep || " ";
    person = person || {};
    person.first = person.first || "";
    person.last = person.last || "";
    return person.first + sep + person.last;
  };
  return filterfun;
});

jsfiddle effect: http://jsfiddle.net/whitewolf/uCPPK/9/

In the example, we first demonstrate the use of the number filter that comes with angularjs. We also show you how to create an angularjs filter. The implementation is very simple. angularjs makes it natural to extend everything

Final note: angularjs filters support chain writing, how to use the pipeline model like powershell or other operating system shell languages, in the form of value | filter1 | filter2.

I hope this article will be helpful to everyone in AngularJS programming.

For more AngularJS filter usage example analysis and related articles, please pay attention to the PHP Chinese website!