AngularJS表格详解及示例代码


Posted in Javascript onAugust 17, 2016

格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。

<table>
  <tr>
   <th>Name</th>
   <th>Marks</th>
  </tr>
  <tr ng-repeat="subject in student.subjects">
   <td>{{ subject.name }}</td>
   <td>{{ subject.marks }}</td>
  </tr>
</table>

表格可以使用CSS样式设置样式,如下:

<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

例子

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
<title>Angular JS Table</title>
<style>
table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
table tr:nth-child(odd) {
 background-color: #f2f2f2;
}
table tr:nth-child(even) {
 background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
<tr><td>Subject:</td><td>
<table>
  <tr>
   <th>Name</th>
   <th>Marks</th>
  </tr>
  <tr ng-repeat="subject in student.subjects">
   <td>{{ subject.name }}</td>
   <td>{{ subject.marks }}</td>
  </tr>
</table>
</td></tr>
</table>
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fees:500,
   subjects:[
     {name:'Physics',marks:70},
     {name:'Chemistry',marks:80},
     {name:'Math',marks:65},
		 {name:'English',marks:75},
		 {name:'Hindi',marks:67}
   ],
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html,看到以下结果:

AngularJS表格详解及示例代码

以上就是AngularJS表格基础知识的整理,后续继续整理相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
怎么清空javascript数组
May 11 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 #Javascript
AngularJS指令详解及示例代码
Aug 16 #Javascript
AngularJS教程之简单应用程序示例
Aug 16 #Javascript
You might like
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
详解使用python crontab设置linux定时任务
2016/12/08 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
数控个人求职信范文
2014/02/03 职场文书
昆虫记读书笔记
2015/06/26 职场文书
房产遗嘱范本
2015/08/06 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js
python模板入门教程之flask Jinja
2022/04/11 Python
python创建字典及相关管理操作
2022/04/13 Python