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实现的表单：只有升降序功能，换行变色，换列变色，点击排序，过滤查找
