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 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 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三元运算符的结合性介绍
2012/01/10 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
python赋值操作方法分享
2013/03/23 Python
Python发送email的3种方法
2015/04/28 Python
python实现将内容分行输出
2015/11/05 Python
python中常用的九种预处理方法分享
2016/09/11 Python
图解Python变量与赋值
2018/04/03 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python request使用方法及问题总结
2020/04/26 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
python实现ping命令小程序
2020/12/28 Python
Python中的流程控制详解
2021/02/18 Python
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
2014年圣诞节促销方案
2014/03/14 职场文书
会计专业求职信范文
2014/03/16 职场文书
白银帝国观后感
2015/06/17 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL