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 AJAX 用于计算点击率(统计)
Jun 30 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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
PHP4在Windows2000下的安装
2006/10/09 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
13个PHP函数超实用
2015/10/21 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python如何在bool函数中取值
2020/09/21 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书