首页 > 其他 > 详细

表格样式一二

时间:2017-08-21 23:37:27      阅读:346      评论:0      收藏: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>
显示代码样式

 技术分享

 

表格样式一二

原文:http://www.cnblogs.com/duoluo-lin/p/7407247.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!