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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
详解webpack 热更新优化
Sep 13 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Python、Javascript中的闭包比较
2015/02/04 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
如何编写python的daemon程序
2021/01/07 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
七一表彰活动方案
2014/01/18 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年统计工作总结
2014/11/21 职场文书
交通安全教育主题班会
2015/08/12 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
python 安全地删除列表元素的方法
2022/03/16 Python