AngularJS基础知识笔记之表格


Posted in Javascript onMay 10, 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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
AngularJS基础知识笔记之过滤器
May 10 #Javascript
浅谈下拉菜单中的Option对象
May 10 #Javascript
AngularJS基础学习笔记之控制器
May 10 #Javascript
AngularJS基础学习笔记之指令
May 10 #Javascript
AngularJS基础学习笔记之表达式
May 10 #Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
员工拾金不昧表扬信
2014/01/09 职场文书
合作意向书模板
2014/03/31 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
总结Python使用过程中的bug
2021/06/18 Python
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫