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 相关文章推荐
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
js实现鼠标拖曳效果
Dec 30 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
PHP 源代码压缩小工具
2009/12/22 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
javascript 写类方式之九
2009/07/05 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Python模块文件结构代码详解
2018/02/03 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
五种Python转义表示法
2020/11/27 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
暑期实习鉴定
2013/12/16 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
重阳节简报
2015/07/20 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang