zoukankan      html  css  js  c++  java
  • Part 12 Angularjs filter by multiple properties

    In the example below, we are using multiple search textboxes. As you type in the "Search name" textbox, only the name property is searched and matching elements are displayed. Similarly, as you type in the "Search city" textbox, only the city property is searched and the matching elements are displayed. When the "exact match" checkbox is checked, an exact match search is performed.


    Angularjs filter example

    Script.js :

     var app = angular
            .module("myModule", [])
            .controller("myController", function ($scope) {
     
                var employees = [
                    { name: "Ben", gender: "Male", salary: 55000, city: "London" },
                    { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
                    { name: "Mark", gender: "Male", salary: 57000, city: "London" },
                    { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
                    { name: "Todd", gender: "Male", salary: 60000, city: "London" },
                ];
     
                $scope.employees = employees;
            });

    HtmlPage1.html :

     <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/angular.min.js"></script>
        <script src="Scripts/Script.js"></script>
        <link href="Styles.css" rel="stylesheet" />
    </head>
    <body ng-app="myModule">
        <div ng-controller="myController">
            <input type="text" placeholder="Search name" ng-model="searchText.name" />
            <input type="text" placeholder="Search city" ng-model="searchText.city" />
            <input type="checkbox" ng-model="exactMatch" /> Exact Match
            <br /><br />
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Salary</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="employee in employees | filter: searchText : exactMatch">
                        <td> {{ employee.name }} </td>
                        <td> {{ employee.gender }} </td>
                        <td> {{ employee.salary  }} </td>
                        <td> {{ employee.city  }} </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>

    Styles.css

     body {
        font-family: Arial;
    }
     
    table {
        border-collapse: collapse;
    }
     
    td {
        border: 1px solid black;
        padding: 5px;
    }
     
    th {
        border: 1px solid black;
        padding: 5px;
        text-align: left;
    }

    The following example has a single search textbox, and is used to search multiple properties - name and city.

    Angularjs filter by multiple properties

    Script.js :

     var app = angular
            .module("myModule", [])
            .controller("myController", function ($scope) {
     
                var employees = [
                    { name: "Ben", gender: "Male", salary: 55000, city: "London" },
                    { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
                    { name: "Mark", gender: "Male", salary: 57000, city: "London" },
                    { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
                    { name: "Todd", gender: "Male", salary: 60000, city: "London" },
                ];
     
                $scope.employees = employees;
     
                $scope.search = function (item) {
                    if ($scope.searchText == undefined) {
                        return true;
                    }
                    else {
                        if (item.city.toLowerCase()
                                     .indexOf($scope.searchText.toLowerCase()) != -1 ||
                            item.name.toLowerCase()
                                     .indexOf($scope.searchText.toLowerCase()) != -1) {
                            return true;
                        }
                    }
     
                    return false;
                };
            });

    HtmlPage1.html :

     <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/angular.min.js"></script>
        <script src="Scripts/Script.js"></script>
        <link href="Styles.css" rel="stylesheet" />
    </head>
    <body ng-app="myModule">
        <div ng-controller="myController">
            Search : <input type="text" placeholder="Search city & name"
                            ng-model="searchText" />
            <br /><br />
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Salary</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="employee in employees | filter: search">
                        <td> {{ employee.name }} </td>
                        <td> {{ employee.gender }} </td>
                        <td> {{ employee.salary  }} </td>
                        <td> {{ employee.city  }} </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    Ubuntu上使用Latex
    Ubuntu18.04 解压文件名乱码的解决方法
    Android 编译 opencv
    android 使用编译好的sdk
    https协议加密原理介绍(一)
    java 面试题目 class.forName和load的区别
    给进程设置环境变量
    Maven 编译jdk配置
    Docker积累
    潜谈单例模式
  • 原文地址:https://www.cnblogs.com/gester/p/5174232.html
Copyright © 2011-2022 走看看