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解析XML的实现代码
Nov 12 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
vue中touch和click共存的解决方式
Jul 28 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 Stream_*系列函数
2010/08/01 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
在Python中实现字典反转案例
2020/12/05 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
人代会标语
2014/06/30 职场文书
校本培训个人总结
2015/02/28 职场文书
观后感格式
2015/06/19 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS