An example analysis of filter usage of ANGULARJS filters _angularjs

Source: Internet
Author: User

The example in this article describes the Angularjs filter filter usage. Share to everyone for your reference, specific as follows:

In this section, we'll look at the Angularjs filter filter.

In our development often need to display on the page to the user's information needs to be processed format, can be displayed to the user. such as time localization, or YYYY-MM-DD HH:MM:SS format, digital precision format, localization, name format and so on. In the ANGULARJS to provide us with the order called filter, so that we can easily do some of the functions of the column, Angularjs inside for us to provide a number of many built-in filter. And we can easily customize our domain filter.

The following example:

Html:

<div ng-app= "app" ng-controller= "Test" >
num:<input ng-model= "num"/>
<br/>
{{num | Number}}
<br/>
{{num | number:2}}
<br/>
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, the filter use of the number with ANGULARJS is first demonstrated. Again for our style how to create a angularjs filter. The implementation is simple. Angularjs makes it all natural to expand

finally : Angularjs filters support chain writing, how to PowerShell or other operating system shell language like the pipeline model, such as value | Filter1 | Filter2.

I hope this article will help you to Angularjs program design.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.