AngularJS基础知识笔记之表格


Posted in Javascript onMay 10, 2015

表格数据本质上通常是重复的。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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
AngularJS基础知识笔记之过滤器
May 10 #Javascript
浅谈下拉菜单中的Option对象
May 10 #Javascript
AngularJS基础学习笔记之控制器
May 10 #Javascript
AngularJS基础学习笔记之指令
May 10 #Javascript
AngularJS基础学习笔记之表达式
May 10 #Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
You might like
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
NodeJS安装图文教程
2018/04/19 NodeJs
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python创建临时文件夹的方法
2015/07/06 Python
Python正则捕获操作示例
2017/08/19 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python中dict使用方法详解
2019/07/17 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
《凡卡》教学反思
2014/04/09 职场文书
机关办公室岗位职责
2014/04/16 职场文书
师德师风个人反思
2014/04/28 职场文书
导游词之太原天龙山
2020/01/02 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
了解Redis常见应用场景
2021/06/23 Redis
JS数组去重详情
2021/11/07 Javascript