Angular supports product filtering and angular product filtering.

Angular supports product filtering and angular product filtering.

I. demo Function Analysis

1. Create data through service () and traverse the rendered page
2. query fields based on the input values in the input box.
3. Click on each column to implement sorting.

II. Implementation

1.1 data definition and rendering

Angular is more inclined to be an MVVM framework, so its controller is very thin and there is little business logic in it, therefore, you should develop methods that write logic in services, factories, and other angular-provided services that can be customized. This demo uses angular service to register and define product data.

Angular. module ("app", []). service ("productData", function () {// you can use the service method to define data. You can also use the factory method to define return [{id: 1002, name: 'huawei ', quantity: 200, price: 4300}, {id: 2123, name: 'iphone7', quantity: 38, price: 6300}, {id: 3001, name: 'xiaomi ', quantity: 3, price: 2800}, {id: 4145, name: 'oppo ', quantity: 37, price: 2100}, {id: 5563, name: 'vivo ', quantity: 23, price: 2100}]}) // imports the productData dependency defined by the service. controller ("myCtrl", function ($ scope, productData) {$ scope. data = productData; // assign a value to $ scope. order = ''; // used for sorting a single column. For details, see $ scope. changeOrder = function (type) {$ scope. orderType = type; if ($ scope. order = '') {$ scope. order = '-';} else {$ scope. order = '';}}})

Data Rendering section:

<Table class = "table"> <thead> <tr> <th ng-class = "{dropup: order = ''}" ng-click = "changeOrder ('id ') "> product no. <span class =" caret "> </span> </th> <th ng-class =" {dropup: order = ''}" ng-click = "changeOrder ('name ') "> product names <span class =" caret "> </span> </th> <th ng-class =" {dropup: order = ''}" ng-click = "changeOrder ('price ') "> product price <span class =" caret "> </span> </th> </tr> </thead> <tbody> <tr ng-repeat =" value in data | filter: {id: search} | orderBy: order + orderType "> <td >{{ value. id }}</td> <td >{{ value. name }}</td> <td >{{ value. price }}</td> </tr> </tbody> </table>

Note:The caret Class Name of bootstrap is used to display the triangle symbol, and the triangle symbol is switched by adding dropup to the parent element.
1. The conversion of the triangle symbol is determined by the ng-class command. The input expression is true when order = ''. The dropup class name is added to th.
2. Use the ng-click command to bind the click event to switch the sorting mode.

2.2 search

Search for input fields using angular filter

<! -- Bind a value using ng-model in the input box --> search: <input type = "text" ng-model = "search"> <! -- Use filter: {id: search} to search for content by id and search by search value --> <tr ng-repeat = "value in data | filter: {id: search} | orderBy: order + orderType "> <td >{{ value. id }}</td> <td >{{ value. name }}</td> <td >{{ value. price }}</td> </tr>

2.3 sorting

1. Define the order attribute to set the forward or reverse order.
2. Define the orderType attribute to set the value of reference sorting.
3. Define the changeOrder () method to implement the click-to-switch sorting function.

$ Scope. order = ''; // when order is'', the forward direction is $ scope. changeOrder = function (type) {// input the attribute name, which is sorted by $ scope. orderType = type; if ($ scope. order = '') {$ scope. order = '-'; // Reverse order} else {$ scope. order = '';}}

On the page: The changeOrder () function Imports "type" as the parameter, and internally sets the reference type for sorting through \ $ scope. orderType = type;

<Table class = "table"> <thead> <tr> <th ng-class = "{dropup: order = ''}" ng-click = "changeOrder ('id ') "> product no. <span class =" caret "> </span> </th> <th ng-class =" {dropup: order = ''}" ng-click = "changeOrder ('name ') "> product names <span class =" caret "> </span> </th> <th ng-class =" {dropup: order = ''}" ng-click = "changeOrder ('price ') "> product price <span class =" caret "> </span> </th> </tr> </thead> <tbody> <tr ng-repeat =" value in data | filter: {id: search} | orderBy: order + orderType "> <td >{{ value. id }}</td> <td >{{ value. name }}</td> <td >{{ value. price }}</td> </tr> </tbody> </table>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.