AngularJS基础知识笔记之表格  更新时间:2015年05月10日 11:17:49   投稿:hebedich   这篇文章主要介绍了AngularJS基础知识笔记之表格的相关资料,需要的朋友可以参考下 表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 Name Marks {{ subject.name }} {{ subject.marks }} 表格可以使用CSS样式设置样式,如下: 例子 下面的例子将展示上述所有指令。 testAngularJS.html Angular JS Table AngularJS Sample Application Enter first name: Enter last name: Name: {{student.fullName()}} Subject: Name Marks {{ subject.name }} {{ subject.marks }} 以上所述就是本文的全部内容了,希望大家能够喜欢。 您可能感兴趣的文章: AngularJS中如何使用$http对MongoLab数据表进行增删改查 详解AngularJS中的表格使用 angularjs表格ng-table使用备忘录 angularjs表格分页功能详解 如何用angularjs制作一个完整的表格 使用angularjs创建简单表格 AngularJS中的Directive自定义一个表格 AngularJS 与Bootstrap实现表格分页实例代码 AngularJS表格添加序号的方法 AngularJS实现表格的增删改查(仅限前端) AngularJS 表格 相关文章 Angular.js中控制器之间的传值详解 angular中每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其他控制器中的数据就要考虑到控制器之间参数的传递了,下面来看看详细的介绍。 2017-04-04 浅谈Angular4中常用管道 本篇文章主要介绍了Angular4中常用管道,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 angularJs中跳转到指定的锚点实例($anchorScroll) 今天小编就为大家分享一篇angularJs中跳转到指定的锚点实例($anchorScroll),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 AngularJs 终极购物车(实例讲解) 下面小编就为大家带来一篇AngularJs 终极购物车的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 AngularJS入门教程之更多模板详解 本文主要介绍AngularJS模板的资料知识,这里帮大家整理了详细的模版资料,及实现示例代码,帮助大家学习AngularJS的知识,有需要的小伙伴可以参考下 2016-08-08 Angular使用动态加载组件方法实现Dialog的示例 这篇文章主要介绍了Angular使用动态加载组件方法实现Dialog的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 Angular2使用vscode断点调试ts文件的方法 本篇文章主要介绍了Angular2使用vscode断点调试ts文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 angular组件继承的实现方法 本篇文章主要介绍了angular组件继承的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-02-02 使用AngularJS实现可伸缩的页面切换的方法 这篇文章主要介绍了使用AngularJS实现可伸缩的页面切换的方法,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下 2015-06-06 angular使用md5,CryptoJS des加密的方法 这篇文章主要介绍了angular使用md5,CryptoJS des加密的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-06-06 最新评论

表格数据本质上通常是重复的。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中如何使用$http对MongoLab数据表进行增删改查
  • 详解AngularJS中的表格使用
  • angularjs表格ng-table使用备忘录
  • angularjs表格分页功能详解
  • 如何用angularjs制作一个完整的表格
  • 使用angularjs创建简单表格
  • AngularJS中的Directive自定义一个表格
  • AngularJS 与Bootstrap实现表格分页实例代码
  • AngularJS表格添加序号的方法
  • AngularJS实现表格的增删改查(仅限前端)
张贴在3