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 相关文章推荐
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
jQuery构造函数init参数分析
May 13 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
jQuery中extend函数详解
Jul 13 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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 函数中使用static的说明
2012/06/01 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP中常用的魔术方法
2017/04/28 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
详解python eval函数的妙用
2017/11/16 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python Pillow Image Invert
2019/01/22 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
音乐系毕业生自荐信
2013/10/27 职场文书
给国外客户的邀请函
2014/01/30 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
倡议书格式
2014/08/30 职场文书
感恩节寄语2015
2015/03/24 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL