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表单验证使用插件formValidator
Nov 10 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
js实现AI五子棋人机大战
May 28 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 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
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
angular分页指令操作
2017/01/09 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
用vue写一个日历
2020/11/02 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
python定位xpath 节点位置的方法
2019/08/27 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
护士实习自我鉴定
2013/10/22 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
关于vue-router-link选择样式设置
2022/04/30 Vue.js
Java版 单机五子棋
2022/05/04 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers