AngularJS表格详解及示例代码


Posted in Javascript onAugust 17, 2016

格数据本质上通常是重复的。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表格基础知识的整理,后续继续整理相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript算法学习(直接插入排序)
Apr 12 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
jquery 插件学习(二)
Aug 06 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 #Javascript
AngularJS指令详解及示例代码
Aug 16 #Javascript
AngularJS教程之简单应用程序示例
Aug 16 #Javascript
You might like
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
DOM相关内容速查手册
2007/02/07 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python解析基于xml格式的日志文件
2017/02/25 Python
Python实现的矩阵类实例
2017/08/22 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
老公给老婆的道歉信
2014/01/10 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
校长寄语大全
2014/04/09 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
热门专业求职信
2014/05/24 职场文书
委托证明书
2014/09/17 职场文书
报案材料怎么写
2015/05/25 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers