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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍AngularJS基础知识笔记之过滤器，包括了AngularJS基础知识笔记之过滤器的使用技巧和注意事项，需要的朋友参考一下 过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。 4 过滤器 过滤数组中它根据所提供的标准的一个
-
本文向大家介绍mysql学习笔记之基础知识，包括了mysql学习笔记之基础知识的使用技巧和注意事项，需要的朋友参考一下 查看数据库 show databases; 创建数据库 create DATABASE 数据库名称 create DATABASE databasetest; 选择数据库 use 数据库名称 use databasetest; ------------ Database chan
-
本文向大家介绍php学习笔记之基础知识，包括了php学习笔记之基础知识的使用技巧和注意事项，需要的朋友参考一下 php学习至今一年有余，笔记积累挺多的，也挺杂的，写篇文章整理一下吧。 php基础部分 PHP 输出文本的基础指令：echo 和 print。 echo和print的区别 echo是PHP语句, print和print_r是函数，语句没有返回值，函数可以有返回值(即便没有用) echo
-
本文向大家介绍AngularJS基础知识，包括了AngularJS基础知识的使用技巧和注意事项，需要的朋友参考一下 angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动（通过$scope对象），将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的代码 3.方
-
本文向大家介绍bootstrap基础知识学习笔记，包括了bootstrap基础知识学习笔记的使用技巧和注意事项，需要的朋友参考一下 在此就不做 bootstrap 的介绍了，近几年 bootstrap 越来越流行，一点不亚于 js 中的 jquery。 以下为 bootstrap 3.3.5 学习中记录的东西，方便查阅，作者使用的是 jsp ，跟 html 可能有稍许不同，请自行参考修改 【引用文
-
本文向大家介绍AngularJS基础学习笔记之表达式，包括了AngularJS基础学习笔记之表达式的使用技巧和注意事项，需要的朋友参考一下 AngularJS通过表达式将数据绑定到HTML。 AngularJS表达式 AngularJS表达式写在双大括号中：{{ 表达式语句 }}。 AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。 AngularJS会准