导航

表格样式一二

Posted on 2017-08-21 23:11  堕落天使不再来  阅读(117)  评论(0)    收藏  举报 

 1                     <table class="o-table">
 2                         <thead>
 3                             <tr>
 4                                 <th>用户名</th>
 5                                 <th>性别</th>
 6                                 <th>年龄</th>
 7                             </tr>
 8                         </thead>
 9                         <tbody>
10                             <tr ng-repeat="x in users | orderBy : 'age'">
11                                 <td>{{x.username}}</td>
12                                 <td>{{x.sex}}</td>
13                                 <td>{{x.age}}</td>
14                             </tr>
15                         </tbody>
16                     </table>
17                     <script type="text/javascript">
18                         var app = angular.module('tableApp',[]);
19                         app.controller('customersCtrl',function($scope,$http,$compile){
20                             $scope.users = [
21                                     {username:'麦语',sex:'女',age:'10'},
22                                     {username:'麦语',sex:'女',age:'22'},
23                                     {username:'麦语',sex:'女',age:'11'}
24                                 ];
25                         })
26                     </script>
显示代码样式

 1                     <table class="o-table o-table-checkboxs">
 2                         <thead>
 3                             <tr>
 4                                 <th>
 5                                     <label class="o-checkbox o-all-checkbox">
 6                                         <input type="checkbox" name="c1"></input>
 7                                         <i class="icon-chkbox"></i>
 8                                     </label>
 9                                 </th>
10                                 <th>
11                                     序号
12                                 </th>
13                                 <th>
14                                     姓名
15                                 </th>
16                                 <th>
17                                     性别
18                                 </th>
19                                 <th>
20                                     年龄
21                                 </th>
22                             </tr>
23                         </thead>
24                         <tbody>
25                             <tr ng-repeat="x in users | orderBy : 'age'">
26                                 <td>
27                                     <label class="o-checkbox o-single-checkbox">
28                                         <input type="checkbox" name="c1"></input>
29                                         <i class="icon-chkbox"></i>
30                                     </label>
31                                 </td>
32                                 <td>{{ $index + 1 }}</td>
33                                 <td>{{x.username}}</td>
34                                 <td>{{x.sex}}</td>
35                                 <td>{{x.age}}</td>
36                             </tr>
37                         </tbody>
38                     </table>
39                     <script type="text/javascript">
40                         var app = angular.module('tableApp',[]);
41                         app.controller('customersCtrl',function($scope,$http,$compile){
42                             $scope.users = [
43                                     {username:'麦语',sex:'女',age:'10'},
44                                     {username:'麦语',sex:'女',age:'22'},
45                                     {username:'麦语',sex:'女',age:'11'}
46                                 ];
47                         })
48                     </script>
显示代码样式