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 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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生成图形验证码几种方法小结
2013/08/15 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
destoon复制新模块的方法
2014/06/21 PHP
php实现的日历程序
2015/06/18 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python遍历numpy数组的实例
2018/04/04 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
django 读取图片到页面实例
2020/03/27 Python
python如何查看网页代码
2020/06/07 Python
旅游管理毕业生自荐信
2013/11/05 职场文书
心得体会开头
2014/01/01 职场文书
高中学生评语大全
2014/04/25 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
早会开场白台词大全
2015/06/01 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
php双向队列实例讲解
2021/11/17 PHP