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 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
vue之数据交互实例代码
Jun 16 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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中串行化用法示例
2016/11/16 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
React组件生命周期详解
2017/07/03 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
详解vuex的简单使用
2018/03/12 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
python+django加载静态网页模板解析
2017/12/12 Python
python机器学习之神经网络(二)
2017/12/20 Python
举例讲解Python常用模块
2019/03/08 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
安全标兵事迹材料
2014/08/17 职场文书
总经理检讨书范文
2015/02/16 职场文书
个人工作能力自我评价
2015/03/05 职场文书
企业投资意向书
2015/05/09 职场文书
运动会报道稿大全
2015/07/23 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
创业计划书之酒吧
2019/12/02 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
python blinker 信号库
2022/05/04 Python