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 相关文章推荐
input输入框的自动匹配(原生代码)
Mar 19 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
Vue-Router的使用方法
Sep 05 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
关于PHP开发的9条建议
2015/07/27 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js实现飞入星星特效代码
2014/10/17 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
高二学生评语大全
2014/04/25 职场文书
村官个人总结范文
2015/03/03 职场文书
天那边观后感
2015/06/09 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS