AngularJS表格详解及示例代码  更新时间:2016年08月17日 08:47:45   作者:顾志雄   本文主要讲解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 }} 输出 在Web浏览器打开textAngularJS.html,看到以下结果: 以上就是AngularJS表格基础知识的整理,后续继续整理相关知识,谢谢大家对本站的支持! 您可能感兴趣的文章: AngularJS表格添加序号的方法 AngularJS 与Bootstrap实现表格分页实例代码 AngularJS入门教程之表格实例详解 angularjs表格ng-table使用备忘录 AngularJS中的Directive自定义一个表格 如何用angularjs制作一个完整的表格 angularjs表格分页功能详解 使用angularjs创建简单表格 详解AngularJS中的表格使用 AngularJS基础知识笔记之表格 AngularJS表格样式简单设置方法示例 AngularJS 表格 相关文章 详解Angular调试技巧之报错404(not found) 本篇文章主要介绍了详解Angular调试技巧之报错404(not found),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 AngularJS 输入验证详解及实例代码 本文主要介绍AngularJS 输入验证,这里对AngularJS 输入验证的资料做了整理,并附简单实例代码和效果图,有需要的小伙伴参考下 2016-07-07 深入理解angularjs过滤器 下面小编就为大家带来一篇深入理解angularjs过滤器。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-05-05 玩转Koa之koa-router原理解析 本文将要分析的是经常用到的路由中间件 — koa-router,详细的介绍了koa-router概述和实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 深入理解Angular4订阅(Subscribe)与取消 这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消,详细的介绍了订阅与取消的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-11-11 AngularJS中transclude用法详解 这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能、使用技巧与相关注意事项,需要的朋友可以参考下 2016-11-11 Angular如何引入第三方库的方法详解 本篇文章主要介绍了Angular如何引入第三方库的方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 理解AngularJs篇:30分钟快速掌握AngularJs 这篇文章主要介绍了理解AngularJs篇:30分钟快速掌握AngularJs,详细介绍了AngularJs所涉及的知识点,有兴趣的可以了解一下。 2016-12-12 AngularJS实现根据不同条件显示不同控件 本篇文章主要介绍了AngularJS实现根据不同条件显示不同控件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧 2017-04-04 angular.fromJson与toJson方法用法示例 这篇文章主要介绍了angular.fromJson与toJson方法用法,结合实例形式分析了AngularJS使用fromJson与toJson方法进行json格式数据的解析与转换相关操作技巧,需要的朋友可以参考下 2017-05-05 最新评论

格数据本质上通常是重复的。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>

输出

在Web浏览器打开textAngularJS.html,看到以下结果:

以上就是AngularJS表格基础知识的整理,后续继续整理相关知识,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • AngularJS表格添加序号的方法
  • AngularJS 与Bootstrap实现表格分页实例代码
  • AngularJS入门教程之表格实例详解
  • angularjs表格ng-table使用备忘录
  • AngularJS中的Directive自定义一个表格
  • 如何用angularjs制作一个完整的表格
  • angularjs表格分页功能详解
  • 使用angularjs创建简单表格
  • 详解AngularJS中的表格使用
  • AngularJS基础知识笔记之表格
  • AngularJS表格样式简单设置方法示例
张贴在3