脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS中的表格

详解AngularJS中的表格使用

 更新时间：2015年06月16日 12:18:29   投稿：goldensun  
这篇文章主要介绍了详解AngularJS中的表格使用,作为热门的JavaScript框架,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>

输出

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

2015616121842581.png (694×454)

您可能感兴趣的文章:

相关文章

  • 详解angular2实现ng2-router 路由和嵌套路由

    详解angular2实现ng2-router 路由和嵌套路由

    本篇文章主要介绍了详解angular2实现ng2-router 路由和嵌套路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 分享使用AngularJS创建应用的5个框架

    分享使用AngularJS创建应用的5个框架

    如果你计划使用AngularJS创建你的Web应用，那现在就开始吧。你不需要有任何的恐惧和担心，因为现在有很多的框架都可以很好地支持AngularJS
    2015-12-12
  • 初学者AngularJS的环境搭建过程

    初学者AngularJS的环境搭建过程

    这篇文章主要介绍了初学者AngularJS的环境搭建过程,在文章给大家提到了Angular-cli的特性，大家一起看看吧
    2017-10-10
  • AngularJS中取消对HTML片段转义的方法例子

    AngularJS中取消对HTML片段转义的方法例子

    这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下
    2015-01-01
  • angularjs 源码解析之injector

    angularjs 源码解析之injector

    这篇文章主要介绍angular中实现依赖注入的”幕后英雄” — 注入器(Injector)。说它是”幕后英雄”，是因为它才是依赖注入得以实现的主力。我们从源码上来分析下他吧
    2016-08-08
  • 一种angular的方法级的缓存注解（装饰器）

    一种angular的方法级的缓存注解（装饰器）

    本篇文章主要介绍了一种angular的方法级的缓存注解（装饰器），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 简介AngularJS的视图功能应用

    简介AngularJS的视图功能应用

    这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以参考下
    2015-06-06
  • 详解angularJS自定义指令间的相互交互

    详解angularJS自定义指令间的相互交互

    本篇文章主要介绍了详解angularJS自定义指令间的相互交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 使用Angular自定义字段校验指令的方法示例

    使用Angular自定义字段校验指令的方法示例

    这篇文章主要介绍了使用Angular自定义字段校验指令的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 详解Webstorm 下的Angular2.0开发之路(图文)

    详解Webstorm 下的Angular2.0开发之路(图文)

    这篇文章主要介绍了详解Webstorm 下的Angular2.0开发之路(图文) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论