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英文日期(有时间)选择器
May 02 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
express框架下使用session的方法
Jul 31 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
长波有什么东西
2021/03/01 无线电
php把数组值转换成键的方法
2015/07/13 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
小班下学期幼儿评语
2014/12/30 职场文书
技术入股合作协议书
2016/03/21 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
Docker部署Mysql8的实现步骤
2022/07/07 Servers