AngularJS中table表格基本操作示例
本文实例讲述了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程序设计有所帮助。
相关推荐
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
玫瑰小妖 2020-06-07
lyg0 2020-05-28
momode 2020-09-11
思君夜未眠 2020-09-04
世樹 2020-11-11
SCNUHB 2020-11-10
bleach00 2020-11-10
FellowYourHeart 2020-10-05
jessieHJ 2020-08-19
末点 2020-08-03
nimeijian 2020-07-30
好记忆也需烂 2020-07-28
zlsdmx 2020-07-05
tomson 2020-07-05
tianqi 2020-07-05