AngularJS中table表格基本操作示例


Posted in Javascript onOctober 10, 2017

本文实例讲述了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中table表格基本操作示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript克隆对象深度介绍
Nov 20 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
vue实现节点增删改功能
Sep 26 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 #Javascript
JavaScript实现计数器基础方法
Oct 10 #Javascript
JS实现合并json对象的方法
Oct 10 #Javascript
jQuery实现的form转json经典示例
Oct 10 #jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 #Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 #Javascript
vue.js实现简单轮播图效果
Oct 10 #Javascript
You might like
php4的session功能评述(二)
2006/10/09 PHP
自动分页的不完整解决方案
2007/01/12 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python random模块的使用示例
2020/10/10 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
旅游管理毕业生自荐信
2013/11/05 职场文书
暑期实习鉴定
2013/12/16 职场文书
找工作最新求职信
2013/12/22 职场文书
电焊工岗位职责
2014/03/06 职场文书
财产公证书样本
2014/04/04 职场文书
公司门卫工作职责
2014/06/28 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Python中基础数据类型 set集合知识点总结
2021/08/02 Python