AngularJS表格添加序号的方法


Posted in Javascript onMarch 03, 2017

本文实例讲述了AngularJS表格添加序号的方法。分享给大家供大家参考,具体如下:

1、问题背景

AngularJS表格需要序号,可以利用$index来作为序号

2、实现实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AngularJS之表格序号</title>
    <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
    <script src="angular.js/1.4.6/angular.min.js"></script>
    <style>
      table,th,td{
        border-collapse: collapse;
      }
      table tr:nth-child(even){
        background-color: #F7E1B5;
      }
      table tr:nth-child(odd){
        background-color: #F1F1F1;
      }
    </style>
    <script>
      var app = angular.module("tableStyleApp",[]);
      app.controller("tableStyleController",function($scope){
        $scope.datas = [
          {no:"2016010101",name:"张思",age:"23"},
          {no:"2016010102",name:"赵虎",age:"22"},
          {no:"2016010103",name:"李磊",age:"24"},
          {no:"2016010104",name:"孙雪",age:"21"},
          {no:"2016010105",name:"郝蕾",age:"20"},
          {no:"2016010106",name:"朱峰",age:"25"},
          {no:"2016010107",name:"升力",age:"22"},
          {no:"2016010108",name:"刘华",age:"24"},
          {no:"2016010109",name:"京兆",age:"20"},
          {no:"2016010110",name:"张峰",age:"22"}
        ]
      });
    </script>
  </head>
  <body>
    <div ng-app="tableStyleApp" ng-controller="tableStyleController">
      <table class="table table-bordered table-condensed">
        <thead>
          <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="data in datas">
            <td>{{$index+1}}</td>
            <td>{{data.no}}</td>
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

3、实现结果

AngularJS表格添加序号的方法

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
DOM 高级编程
May 06 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
webpack优化的深入理解
Dec 10 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
JS实现双击内容变为可编辑状态
Mar 03 #Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 #Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 #Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 #Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 #Javascript
JavaScript数组迭代方法
Mar 03 #Javascript
vue.js的提示组件
Mar 02 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python自动化报告的输出用例详解
2018/05/30 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
财经学院自荐信范文
2014/02/02 职场文书
《金子》教学反思
2014/04/13 职场文书
银行授权委托书范本
2014/10/04 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
学生违反校规检讨书
2014/10/28 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
Consul在linux环境的集群部署
2022/04/08 Servers