你的位置:首页 > Java教程

[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 ="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;}