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 原型继承之构造函数继承
Aug 26 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
微信小程序用canvas画图并分享
Mar 09 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调用Webservice实例代码
2011/07/29 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
JavaScript函数详解
2014/11/17 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JS实现百度搜索框
2021/02/25 Javascript
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
py-charm延长试用期限实例
2019/12/22 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python的logging模块基本用法
2020/12/24 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
《木笛》教学反思
2014/03/01 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
四年级学生评语大全
2014/04/21 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
作文评语怎么写
2014/12/25 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android