AngularJS中table表格基本操作示例
更新時間:2017年10月10日 12:13:23 作者:Zerone1993
這篇文章主要介紹了AngularJS中table表格基本操作,涉及AngularJS針對table表格元素與屬性的相關動態(tài)操作技巧,需要的朋友可以參考下
本文實例講述了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程序設計有所幫助。
相關文章
AngularJS輔助庫browserTrigger用法示例
這篇文章主要介紹了AngularJS輔助庫browserTrigger用法,結合實例形式分析了輔助庫browserTrigger的功能及單元測試中的使用技巧,需要的朋友可以參考下2016-11-11詳解基于Bootstrap+angular的一個豆瓣電影app
本篇文章主要介紹了基于Bootstrap+angular的一個豆瓣電影app ,非常具有實用價值,需要的朋友可以參考下2017-06-06angularjs實現對表單輸入改變的監(jiān)控(ng-change和watch兩種方式)
這篇文章主要介紹了angularjs通過ng-change和watch兩種方式實現對表單輸入改變的監(jiān)控,需要的朋友可以參考下2018-08-08理解AngularJs篇:30分鐘快速掌握AngularJs
這篇文章主要介紹了理解AngularJs篇:30分鐘快速掌握AngularJs,詳細介紹了AngularJs所涉及的知識點,有興趣的可以了解一下。2016-12-12AngularJS中directive指令使用之事件綁定與指令交互用法示例
這篇文章主要介紹了AngularJS中directive指令使用之事件綁定與指令交互用法,結合實例形式分析了directive指令在模板的使用,事件的綁定及元素、屬性、控制器之間的交互相關操作技巧,需要的朋友可以參考下2016-11-11