14.名字查找
2017-04-13 17:01 笨笨03 阅读(194) 评论(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>
52 <span>姓名</span>
53 <span>性别</span>
54 <span>年龄</span>
55
56 </li>
57 <li ng-repeat="stu in data | filter : {name:key}">
58 <span>{{$index+1}}</span>
59 <span>{{stu.name}}</span>
60 <span>{{stu.sex}}</span>
61 <span>{{stu.age}}</span>
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>
关键代码：
ng-model="key"
<li ng-repeat="stu in data | filter : {name:key}">
