编程 Javascript

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程序设计有所帮助。

AngularJS表格添加序号的方法

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

点击标签切换和自动切换DIV选项卡

Aug 10 Javascript

JavaScript将字符串转换为整数的方法

Apr 14 Javascript

JavaScript实现梯形乘法表的方法

Apr 25 Javascript

jQuery仿淘宝网产品品牌隐藏与显示效果

Sep 01 Javascript

JavaScript 对象深入学习总结(经典)

Sep 29 Javascript

javascript实现tab切换特效

Nov 12 Javascript

JS验证图片格式和大小并预览的简单实例

Oct 11 Javascript

Javascript中call，apply，bind方法的详解与总结

Dec 12 Javascript

在javascript中，null＞=0 为真，null==0却为假，null的值详解

Feb 22 Javascript

从零开始学习Node.js系列教程三：图片上传和显示方法示例

Apr 13 Javascript

js获取css的各种样式并且设置他们的方法

Aug 22 Javascript

react高阶组件添加和删除props

Apr 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