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检查浏览器是否支持flash的实现代码
Aug 14 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
Highcharts入门之简介
Aug 02 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
vue devtools的安装与使用教程
Aug 08 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
农民和部队如何穿矿
2020/03/04 星际争霸
点评山进PR-D3L三波段收音机
2021/03/02 无线电
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
浅析JS运动
2015/12/28 Javascript
前端性能优化及技巧
2016/05/06 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
js实现随机抽奖
2020/03/19 Javascript
python的faker库用法
2019/11/28 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
干部行政关系介绍信
2014/01/17 职场文书
高中生的自我评价
2014/03/04 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Android存储中最基本的文件存储方式
2022/04/30 Java/Android