AngularJS中table表格基本操作示例
网络编程 2021-07-04 17:32www.168986.cn编程入门
这篇文章主要介绍了AngularJS中table表格基本操作,涉及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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程