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拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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设计模式 注册表模式
2012/02/05 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
phplot生成图片类用法详解
2015/01/06 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP钩子实现方法解析
2019/05/21 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
Python 可爱的大小写
2008/09/06 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
运动员获奖感言
2014/08/15 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
党员违纪检讨书
2015/05/05 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python