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 基础学习笔记之文档处理
May 29 Javascript
javascript call方法使用说明
Jan 11 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
javascript实现获取服务器时间
May 19 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
JavaScript编码小技巧分享
Sep 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
提问的智慧
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python设置代理和添加镜像源的方法
2020/02/14 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
SQL Server笔试题
2012/01/10 面试题
大学系主任推荐信范文
2013/12/24 职场文书
服务之星获奖感言
2014/01/21 职场文书
消防先进事迹材料
2014/02/10 职场文书
机械工程师岗位职责
2014/06/16 职场文书
春游踏青活动方案
2014/08/14 职场文书
校外活动方案
2014/08/28 职场文书
幼儿园见习报告
2014/10/30 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库