代码改变世界

14.名字查找

2017-04-13 17:01  笨笨03  阅读(195)  评论(0)  编辑  收藏  举报

初始页面

-----------------------------------------------------------------------------------------------------

 

 

查找效果

-------------------------------------------------------------------------------------------------

 

 1 <!DOCTYPE html>
 2 <html ng-app="a3_5" ng-controller="c3_5">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>T37-字符查找</title>
 6     <script src="js/angular.js" type="text/javascript"></script>
 7     <style type="text/css">
 8         body {
 9             font-size: 20px;
10         }
11 
12         ul {
13             list-style-type: none;
14             width: 700px;
15             height: 200px;
16             margin: 50px auto;
17         }
18 
19         ul li {
20             float: left;
21             padding: 5px 0;
22         }
23 
24         ul .bold {
25             font-weight: bold;
26             cursor: pointer;
27         }
28 
29         ul li span {
30             width: 60px;
31             float: left;
32             padding: 0;
33         }
34 
35         ul .focus {
36             background-color: #ccc;
37         }
38 
39         .pi {
40             margin:50px 450px;
41         }
42     </style>
43 
44 
45 </head>
46 <body>
47 <div class="pi"><input type="text" id="txtkey" ng-model="key" placeholder="根据名字查找"/></div>
48 
49 <ul>
50     <li ng-class="'{{bold}}'">
51         <span>序号</span>&nbsp;
52         <span>姓名</span>&nbsp;&nbsp;&nbsp;&nbsp;
53         <span>性别</span>&nbsp;&nbsp;&nbsp;&nbsp;
54         <span>年龄</span>&nbsp;
55 
56     </li>
57     <li ng-repeat="stu in data | filter : {name:key}">
58         <span>{{$index+1}}</span>&nbsp;
59         <span>{{stu.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
60         <span>{{stu.sex}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
61         <span>{{stu.age}}</span>&nbsp;
62 
63     </li>
64 </ul>
65 
66 </body>
67 
68 <script type="text/javascript">
69     var app = angular.module("a3_5", []);
70     app.controller("c3_5", ['$scope', function ($scope) {
71         $scope.bold = "bold";
72         $scope.key = '';
73         $scope.data = [
74             {name: "张明", sex: "女", age: 24},
75             {name: "李清", sex: "女", age: 25},
76             {name: "秦风", sex: "男", age: 22},
77             {name: "苏眠", sex: "女", age: 28}
78         ];
79     }])
80 
81 
82 </script>
83 
84 </html>
View Code

 

关键代码：

 ng-model="key"

<li ng-repeat="stu in data | filter : {name:key}">