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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
JQuery animate动画应用示例
May 14 jQuery
纯JS实现五子棋游戏
May 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代码
2010/07/17 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
js自带函数备忘 数组
2006/12/29 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
js友好的时间返回函数
2016/08/24 Javascript
拖动时防止选中
2017/02/03 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
简单理解Python中的装饰器
2015/07/31 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
django rest framework使用django-filter用法
2020/07/15 Python
python安装及变量名介绍详解
2020/12/12 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
新郎婚宴答谢词
2014/01/19 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
工程技术员岗位职责
2014/03/02 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
诚信承诺书模板
2014/05/26 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏