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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
element中el-container容器与div布局区分详解
May 13 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 编写的 25个游戏脚本
2009/05/11 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
database面试题
2013/03/28 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
工业设计专业推荐信
2013/10/29 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
高中生军训感言
2015/08/01 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
python获取对象信息的实例详解
2021/07/07 Python
MySQL约束超详解
2021/09/04 MySQL