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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Vue中render函数的使用方法
Jan 31 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
使用vue制作滑动标签
Sep 21 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
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
php生成酷炫的四个字符验证码
2016/04/22 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python集合操作方法详解
2020/02/09 Python
django迁移文件migrations的实现
2020/03/31 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
优秀教师事迹简介
2014/02/02 职场文书
大学活动总结模板
2014/07/10 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技