码迷,mamicode.com
首页 > 其他好文 > 详细

表格样式一二

时间:2017-08-22 00:18:19      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:script   close   order   user   function   pre   blog   users   java   

技术分享

技术分享
 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>
显示代码样式

 技术分享

 

表格样式一二

标签:script   close   order   user   function   pre   blog   users   java   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!