Angular supports product filtering and angular product filtering.

Source: Internet
Author: User

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.

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.