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 相关文章推荐
取得传值的函数
Oct 27 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
javascript入门教程基础篇
Nov 16 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 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设置图片文件上传大小的具体实现方法
2013/10/11 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
vue+element实现表单校验功能
2019/05/20 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Python装饰器decorator用法实例
2014/11/10 Python
python采集百度百科的方法
2015/06/05 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python操作qml对象过程详解
2019/09/26 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python 如何对文件目录操作
2020/07/10 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Python与C/C++的相互调用案例
2021/03/04 Python
为什么使用接口?
2014/08/13 面试题
如何写好建议书
2014/03/13 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js