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弹出层插件简化版代码下载
Oct 16 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
js实现显示手机号码效果
Mar 09 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 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
Session的工作方式
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php中动态修改ini配置
2014/10/14 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
原生js轮播特效
2017/05/18 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python封装原理与实现方法详解
2018/08/28 Python
python实现简单五子棋游戏
2019/06/18 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python excel转换csv代码实例
2019/08/26 Python
python 消费 kafka 数据教程
2019/12/21 Python
使用python实现多维数据降维操作
2020/02/24 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
廉洁校园实施方案
2014/05/25 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
院系推荐意见
2015/06/05 职场文书
婚宴父母致辞
2015/07/27 职场文书
教务处干事工作总结
2015/08/14 职场文书