AngularJS基础知识笔记之表格
更新时间：2015年05月10日 11:17:49 投稿：hebedich
这篇文章主要介绍了AngularJS基础知识笔记之表格的相关资料,需要的朋友可以参考下
表格数据本质上通常是重复的。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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要介绍了详解Angular如何正确的操作DOM，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家详细介绍了angular6开发steps步骤条组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最近Angular项目组终于发布了新版——正式版 Angular 4.0.0。所以想着就来尝试下升级，记录下整个升级过程分享给大家，所以这篇文章主要介绍了Angular2升级到Angular4的详细步骤，需要的朋友可以参考下。2017-03-03
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-03-03
不得不说指令是ng最为强大的功能之一，好吧，也可以去掉之一，是最强大的功能。下面这篇文章主要给大家介绍了关于Angular4中内置指令的基本用法，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧。2017-07-07
利用VS Code开发你的第一个AngularJS 2应用程序
这篇文章主要给大家介绍了关于利用VS Code如何开发你的第一个AngularJS 2应用程序的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友下面来一起看看吧。2017-12-12
本文主要介绍AngularJs 国际化的知识，这里整理了详细的资料来讲解国际化，有需要的小伙伴可以参考下2016-09-09
本篇文章主要介绍了Angular2 组件通信的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
下面小编就为大家分享一篇Angular自定义组件实现数据双向数据绑定的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
Promise是一个构造函数，自己身上有all、reject、resolve这几个异步方式处理值的方法，原型上有then、catch等同样很眼熟的方法，下面通过实例代码给大家讲解angularjs promise 的相关知识，感兴趣的朋友一起看看吧2018-03-03
最新评论