Angularjs Filtering sorting ideas

This article mainly organizes the idea that uses the ANGULARJS to carry on the filtering sorting.

In the Controller, the persons field of the $scope stores the array.

$scope. Persons = [    {        "name": "AA",        "email": "Aaemail",        "birthdate": " 2015-03-23t18:00:37-07:00 ",        " PhoneNumber ":" Aaphonenumber ",        " address ":" Aaaddress " ,        " City ":" Aacity ",        " country ":" China "    },    ...];

Filter

With 2 text boxes, one input and name, one input and email about, how to implement filtering?

Filter the built-in function filter to accept the object.

→ Define an object in the controller

$scope. Search = {};

→filter condition is Search object

ng-repeat= "Person in Persons | Filter:search "

→ search text boxes and search.name or search.email bindings

<input type= "text" ng-model= "Search.name" type= "text"/>
<input type= "text" ng-model= "Search.email" type= "text"/>

How to search for any property with 1 text boxes?

Filter the built-in function filter to accept the object.

→ Define an object in the controller

$scope. Search = {};

→filter condition is Search object

ng-repeat= "Person in Persons | Filter:search "

→ search text boxes and search.$ bindings

Ng-model= "search.$"

Search.$ represents any property that can be a collection object, and filter returns true whenever the input conforms to any one of the property values of the collection object.

Use 1 text boxes, define the properties of the search, such as can search name, also can search name plus email and so on, how to implement?

Filter the built-in function filter to accept functions that return type bool.

→filter Accept function

ng-repeat= "Person in Persons | Filter:sensitivesearch "

Note that the Sensitivesearch function here receives the person argument.

→ Define the Sensitivesearch method in the controller

$scope. search= "";
$scope. Sensitivesearch = function (person) {
if ($scope. Search) {
Return Person.name.indexOf ($scope. Search) = = 0 | |
Person.email.indexOf ($scope. Search) = = 0;
}
return true;
};

→ Search box Binding search Property

<input type= "text" ng-model= "search"/>

Sort

Implicit sorting, no interface interaction

The built-in sort function accepts a property by order.

ng-repeat= "Person in Persons | Filter:sensitivesearch | By: ' Email '
ng-repeat= "Person in Persons | Filter:sensitivesearch | By: '-email ' "

E-mail indicates ascending order,-emial opposite.

explicit sorting, interface interaction, selecting Sort fields on the interface and ascending and descending, selecting Sort fields by Select

In the $scope of →controller

$scope. Order = "Email";

→orderby Using the Order field

ng-repeat= "Person in Persons | Filter:sensitivesearch | Orderby:order "

→ Interface Select and order field bindings

<select class= "Form-control" ng-model= "Order" >
<option value= "Name" >name (ASC) </option>
<option value= "-name" >name (desc</option>
<option value= "Email" >email (ASC) </option>
<option value= "-email" >email (desc</option>
</select>

explicit sorting, interface interaction, add buttons next to Interface fields, select Ascending or Descending

In the $scope of →controller

$scope. Order = "Email";

→orderby Using the Order field

ng-repeat= "Person in Persons | Filter:sensitivesearch | Orderby:order "

→ Interface

Next to the Name field, add the Ascending descending button:
ng-click= "order = ' name '"
ng-click= "order = '-name '"

Next to the email field, add the Ascending descending button:
ng-click= "order = ' Email '"
ng-click= "order = '-email '"

Click Row Events

Let the current row transform the background color and display the details of the current line somewhere.

→ Add a click event to the current line

<ng-repeat= "Person in Persons | filter:sensitivesearch | orderby:order"             Ng-style= "{' Background-color ': person.email = = Selectedperson.email? ' Lightgray ': '}'            ng-click= ' Selectperson (person) '>

Ng-style accepts an object and sets the style.

→ Define Selectperson in Controller

Nullfunction  (person) {    = person ;};

→ Show details of the row somewhere in the interface

{{Selectedperson.name
{{Selectedperson.email}}
{{selectedperson.birthdate | date: ' Longdate '}}
{{selectedperson.address}}
{{selectedperson.city}}
{{Selectedperson.country}}

How results are processed without searching

When a value is entered in the search box, there may be no matching result. How do I get a hint when I don't have a search result?

→ Assign a variable to a filter-sorted result

ng-repeat= "person in filteredpersons = (Persons | filter:sensitivesearch | orderby:order)"

→ Interface Somewhere

<TRNg-show= "Filteredpersons.length = = 0">  <TDcolspan= "4">    <Divclass= "Alert Alert-info">      <Pclass= "Text-center">No results found for search term ' {{search}} '</P>    </Div>  </TD></TR>

When the search result represented by filteredpersons is empty, the region information is displayed.

Angularjs Filtering sorting ideas