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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JS随机数产生代码分享
Feb 24 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
js实现图片实时时钟
Jan 15 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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与php5的区别小结(配置异同)
2011/12/20 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
利用php输出不同的心形图案
2016/04/22 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
js css自定义分页效果
2017/02/24 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Django中的ajax请求
2018/10/19 Python
python之消除前缀重命名的方法
2018/10/21 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python实现Restful API的例子
2019/08/31 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python自动生成证件号的方法示例
2021/01/14 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
节能宣传周活动总结
2014/05/08 职场文书
三严三实学习心得体会
2014/10/13 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python