详解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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 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
easyui的tabs update正确用法分享
2014/03/21 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python zip()函数用法实例分析
2018/03/17 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
shallow copy和deep copy的区别
2016/05/09 面试题
关于Java finally的面试题
2016/04/27 面试题
优秀老师事迹材料
2014/02/05 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
利用python做数据拟合详情
2021/11/17 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
服务器nginx权限被拒绝解决案例
2022/09/23 Servers