本文實例講述了AngularJS表格基本操作。分享給大家供大家參考,具體如下:
css內容:
table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}
HTML正文:
<body ng-app=""><div ng-init="persons=[{'name':'zhangsan','age':'20'}, {'name':'lisi','age':'19'}, {'name':'lisi','age':'19'}]"><table><!-- $odd:下標為奇數的元素 $even:下標為偶數的元素 --> <tr ng-repeat="x in persons"> <td>{{$index+1}}</td> <!-- 獲取元素的下標值 --> <!-- ng-if類似ms-if進行布爾值判斷顯示 --> <td ng-if="$odd" style="background-color:yellow"> {{ x.name }}</td> <td ng-if="$even">{{ x.name }}</td> <td ng-if="$odd" style="background-color:green"> {{ x.age }}</td> <td ng-if="$even">{{ x.age }}</td> </tr></table><span>{{persons[0]}}</span>
效果:
更多關于AngularJS相關內容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答