AngularJS Filter (Filter) usage

One, use in view template

Apply Filters (filter) in an expression

The following formats are required:

{{expression | filter}} ({{expressions |}}}

For example: {{| currency}} output is $12.00

Application of filters (filter) in output results

The popular point is the filter overlay-the output of the previous filter as the input data source for the latter filter.

The following formats are required:

{{expression | filter1 | filter2 | ...}} That is, expressions (expression) are filtered using filter1 and then filtered with filter2 ...

Filter with parameters

The filter can be followed by one or more parameters to help implement the filter for special requirements and requirements.

The following formats are required:

{{expression | filter:argument1:argument2: ...}}

Example: {{1234 | number:2}} = 1,234.00

Second, using the Angluarjs built-in filter

• ANGULARJS provides us with 9 built-in filters

  They are currency, date, filter, JSON, LimitTo, uppercase, lowercase, number, and so on.

  The specific usage is described in detail in the ANGULARJS documentation. Here are just a few common ones.

• Currency Filter (currency filter)

  currency– used to convert a variable into a monetary representation

  For example: {{amount | currency}}

• Uppercase/lowercase Filter (letter case Filter)

  Such as:

  {{' Lower cap string ' | uppercase}}

  <input ng-model= "Userinput" > uppercased: {{userinput | uppercase}}

• Date Filter (Day filter)

  • Such as:

    {{1304375948024 | date}}

    {{1304375948024 | date: "MM/DD/YYYY @ H:mma"}}

  • JSON filter

    Such as:

    {{{foo: ' Bar ', baz:23} | json}}

  • Using the filter in controllers, services, and Drictives
  • 2. You can use filter in ANGULARJS Controller, service, or driective, At this point you need to add the dependent filter name to the controller, service, or directive dependencies.

    4. 2

       Use filter directly in the controller so that the controller can invoke the filter as needed

       Three, custom filter (filter)
       1. 1

          Angularjs writing a custom filter in the form of a ANGULARJS factory service is very similar, it must remember that it returns an object or a function, when written, only need a function with more than one parameter.

       2. 2

          The format is roughly as follows:

          App.filter (' filter ' name ', function () {

          return function (object to filter, filter parameter 1, filter parameter 2,...) {

          //... Execute Business logic Code

          Return the object after processing;

          }

          });

AngularJS Filter (Filter) usage