zoukankan      html  css  js  c++  java
  • Part 11 Search filter in AngularJS


    Search filter in AngularJS

    As we type in the search textbox, all the columns in the table must be searched and only the matching rows should be displayed. 

    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">
            Search : <input type="text" placeholder="Search employees"
                            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:searchText">
                        <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;
    
    }
  • 相关阅读:
    Codeforces 1000C Covered Points Count
    Array类型
    Object对象
    变量、作用域与内存
    window.onload 方法脚本
    页面的性能优化
    node属性
    JavaScript图片
    DOM节点
    canvas象棋 画图
  • 原文地址:https://www.cnblogs.com/gester/p/5174221.html
Copyright © 2011-2022 走看看