angular作個小表格

時間 2019-11-11
原文原文鏈接
 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             /*控制表頭顏色*/
 8             .blue{background-color: #0099FF;}
 9             /*控制行變色*/
10             /*tbody:nth-child(odd){
11                 background-color: pink;
12             }
13             tbody:nth-child(even){
14                 background-color: greenyellow;
15             }*/
16             
17             /*tbody後多個空格控制列變色*/
18             tbody :nth-child(odd){
19                 background-color: pink;
20             }
21             tbody :nth-child(even){
22                 background-color: greenyellow;
23             }
24             
25             
26             /*控制行變色        配合{odd:!$odd,even:!$even}使用*/
27             /*.odd{background-color: pink;}
28             .even{background: greenyellow;}*/
29             
30         </style>
31     </head>
32     <body ng-controller="myController">
33         <input type="text" placeholder="請輸入搜索的學號" ng-model="i"/>
34         <input type="text" placeholder="請輸入搜索的姓名" ng-model="n"/>
35         <input type="text" placeholder="請輸入搜索的年齡" ng-model="a"/>
36         <input type="text" placeholder="請輸入搜索的性別" ng-model="s"/>
37         <input type="text" placeholder="請輸入搜索的電話號碼" ng-model="t"/>
38         <input type="text" placeholder="請輸入搜索的地址" ng-model="h"/>
39         <input type="text" placeholder="請輸入搜索的學校" ng-model="x"/>
40         <table  cellpadding="20" cellspacing="0" border="1px">
41             <thead>
42                 <td ng-class="{blue:true}" ng-click="id='index';desc=!desc"><span>序號</span></td>
43                 <td ng-class="{blue:true}" ng-click="id='name';desc=!desc"><span>姓名</span></td>
44                 <td ng-class="{blue:true}" ng-click="id='age';desc=!desc"><span>年齡</span></td>
45                 <td ng-class="{blue:true}" ng-click="id='sex';desc=!desc"><span>性別</span></td>
46                 <td ng-class="{blue:true}" ng-click="id='tel';desc=!desc"><span>聯繫方式</span></td>
47                 <td ng-class="{blue:true}" ng-click="id='address';desc=!desc"><span>地址</span></td>
48                 <td ng-class="{blue:true}" ng-click="id='school';desc=!desc"><span>畢業學校</span></td>
49             </thead>
50             <!--orderBy:id:desc"根據不一樣id的初始化desc開關控制升降序-->
51             <!--!$odd,!$even控制單雙行只有一個class是true-->
52             <!--{index:i,name:n,age:a,sex:s,tel:t,address:h,school:x}雙向綁定-->
53             <tbody ng-repeat="p in objs |filter:{index:i,name:n,age:a,sex:s,tel:t,address:h,school:x}|orderBy:id:desc">
54                 <tr>
55                     <!--<td ng-class="{odd:!$odd,even:!$even}" ng-bind="p.index"></td>-->
56                     <td ng-bind="p.index"></td>
57                     <td ng-bind="p.name"></td>
58                     <td ng-bind="p.age"></td>
59                     <td ng-bind="p.sex"></td>
60                     <td ng-bind="p.tel"></td>
61                     <td ng-bind="p.address"></td>
62                     <td ng-bind="p.school"></td>
63                 </tr>    
64             </tbody>
65         </table>
66         
67         <script type="text/javascript" src="angular-1.4.6.min.js" ></script>
68         <script>
69             var myApp=angular.module('myApp',[]);
70             myApp.controller('myController',['$scope',function($scope){    
71                 //初始化升降序開關
72                 $scope.desc = 0;
73                 //建立表格對象
74                 $scope.objs=[{index:1,name:'張三',age:33,sex:'男',tel:'139xxxxxxxx',address:'北京',school:'北京大學'},
75                             {index:2,name:'李三',age:18,sex:'女',tel:'138xxxxxxxx',address:'上海',school:'清華大學'},
76                             {index:3,name:'王六',age:25,sex:'男',tel:'158xxxxxxxx',address:'深圳',school:'哈佛大學'},
77                             {index:4,name:'趙四',age:52,sex:'女',tel:'157xxxxxxxx',address:'廣州',school:'劍橋大學'},
78                             {index:5,name:'林女',age:41,sex:'男',tel:'187xxxxxxxx',address:'南京',school:'麻省理工'},
79                             {index:6,name:'白男',age:62,sex:'女',tel:'182xxxxxxxx',address:'武漢',school:'新東方'},        
80                 ];
81             
82             }]);            
83         </script>
84     </body>
85 </html>
用angular實現的表單：只有升降序功能，換行變色，換列變色，點擊排序，過濾查找javascript
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。