ANGULARJS Training Filter

In Angularjs, filter provides the ability to format or filter data:

1, please see the following simple example

<div ng-controller= "Phonelistextendcontroller" >

I have {{friends.length}} friends. They is:

<input type= "Search" ng-model= "Q" placeholder= "filter Friends ..."/>

<ul>

<li ng-repeat= "Friend in Friends | Filter:q ">

[{{$index + 1}}] {{Friend.name}} ' is ' {{friend.age}} ' years old.

</li>

</ul>

<ul>

<li ng-repeat= "Name in Names | Filter: ' J ' >

[{{$index + 1}}] is {{name}}.

</li>

Total {{Names.length}}

</ul>

</div>

The controller is defined in Controller2.js, and we only loop through the friends with the ng-repeat instruction, showing each person's name and age,

This is not the focus of our introduction today, continue to look:

We use the filter ng-repeat= "friend in Friends" by way of pipeline | Filter:q ", and filter binds a model,

This model is a input box, which means that what you enter is the input for ng-repeat, traversing the attributes in the friends, and deciding whether to include

The character entered.

The effect is as follows:

2, you can also specify the string to filter, the code is as follows:

<li ng-repeat= "Name in Names | Filter: ' J ' >

[{{$index + 1}}] is {{name}}.

</li>

3. If you dynamically specify the content to be filtered in the controller, modify the code as follows:

<li ng-repeat= "Friend in Friends | Filter:q.name ">

[{{$index + 1}}] {{Friend.name}} ' is ' {{friend.age}} ' years old.

</li>

In addition, you need to hang a property value in the controller for $scope,

$scope. Q = {

Name: ' m '

}

With the code above, we can implement the function of dynamic filter collection.

4. Custom Filter

Of course, the built-in filter can not meet all your needs, then you can engage, how to do what you want to do, you want to.

Usually we can use the module's filter method to define one. As follows:

Module.filter (Filtername,function () {

return function (Input) {

return;

}

});

Let's start with a filter to add a string! No.

First declare a string $scope. filters = ' This is my first filter ';

Next we'll define filter:

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

return function (Input) {

return input + "!";

}

});

Description: Myfilter:filter Name

Input: The value of the defined string.

Here's what it shows:

Use {{filters | myfilter}} in the label.

The rest is yours, try it!.

5. Built-in (build-in) filter:

Currency,date,filter,json,limitto,lowercase,number,orderby,uppercase

These usages are relatively simple, no longer attach an example, detailed can refer to

Http://docs.angularjs.cn/api/ng/filter

Filter first introduced here, have any questions or ideas, please leave a message!

This article is from the "Eason's HCC" blog, so be sure to keep this source http://hcc0926.blog.51cto.com/172833/1559668

ANGULARJS Training Filter