AngularJS基础知识笔记之表格
2015-05-10 00:00
1361 查看
表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。
表格可以使用CSS样式设置样式,如下:
例子
下面的例子将展示上述所有指令。
testAngularJS.html
以上所述就是本文的全部内容了,希望大家能够喜欢。
<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>
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关文章推荐
- AngularJS基础知识笔记之表格
- AngularJS基础知识笔记之过滤器
- AngularJS基础知识笔记之过滤器
- php笔记1(基础知识及php的输出结构)
- Java基础知识——String类笔记
- 基础知识(二)matlab与c++混合编程之经验笔记
- [阅读笔记] Content Deployment 完全指南 之一 基础知识
- 【Unity3D】基础知识学习笔记
- X86 ASM学习笔记(基础知识)
- 黑马程序员java笔记之零-----基础知识
- 【python学习笔记一】程序设计计算机基础知识
- 重定向和伪静态学习笔记-----基于apache重定向基础知识
- Struts2学习笔记01----初识struts2配置文件和相关基础知识
- Java基础知识强化之多线程笔记06:Lock接口 (区别于Synchronized块)
- {传智播客} (学习笔记)--Oracle使用需要掌握的基础知识
- 传智播客 Html基础知识学习笔记2
- 【Java学习笔记】基础知识学习10【继承与多态】
- Java基础知识强化之集合框架笔记23:ArrayList存储字符串并遍历
- Lua学习笔记(1)-基础知识、表达式语法
- 【基础中心】笔记六--选中动态表格的一行