详解AngularJS中的表格使用


Posted in Javascript onJune 16, 2015

 表格数据本质上通常是重复的。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中的表格使用

Javascript 相关文章推荐
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
js+HTML5实现视频截图的方法
Jun 16 #Javascript
AngularJS中的过滤器使用详解
Jun 16 #Javascript
简述AngularJS的控制器的使用
Jun 16 #Javascript
详解AngularJS中的表达式使用
Jun 16 #Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
You might like
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Django如何配置mysql数据库
2018/05/04 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python 有效的括号的实现代码示例
2019/11/11 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
一名毕业生的自我鉴定
2013/12/04 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2016中秋节广告语
2016/01/28 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫