AngularJS表格添加序號(hào)的方法

更新時(shí)間：2017年03月03日 10:17:42 作者：翱翔天地

這篇文章主要介紹了AngularJS表格添加序號(hào)的方法,涉及AngularJS表格的遍歷及序號(hào)添加實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS表格添加序號(hào)的方法。分享給大家供大家參考，具體如下：

1、問(wèn)題背景

AngularJS表格需要序號(hào)，可以利用$index來(lái)作為序號(hào)

2、實(shí)現(xiàn)實(shí)例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AngularJS之表格序號(hào)</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>序號(hào)</th>
            <th>學(xué)號(hào)</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、實(shí)現(xiàn)結(jié)果

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入3
這篇文章主要為大家詳細(xì)介紹了AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入第三篇，感興趣的小伙伴們可以參考一下
2016-08-08
淺談angular.copy() 深拷貝
本篇文章主要介紹了淺談angular.copy() 深拷貝，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
探索angularjs+requirejs全面實(shí)現(xiàn)按需加載的套路
這篇文章主要探索了angularjs+requirejs全面實(shí)現(xiàn)按需加載的套路，圍繞angularjs提供的各種機(jī)制進(jìn)行研究，感興趣的小伙伴們可以參考一下
2016-02-02
Angular實(shí)現(xiàn)表格自滾動(dòng)效果
這篇文章主要為大家介紹了如何通過(guò)Angular實(shí)現(xiàn)表格自動(dòng)滾動(dòng)的效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Angular有一定幫助，需要的可以參考一下
2022-01-01
淺談angularjs依賴服務(wù)注入寫法的注意點(diǎn)
下面小編就為大家?guī)?lái)一篇淺談angularjs依賴服務(wù)注入寫法的注意點(diǎn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
AngularJS中實(shí)現(xiàn)顯示或隱藏動(dòng)畫效果的方式總結(jié)
AngularJS 是一組用于創(chuàng)建單頁(yè)Web應(yīng)用的豐富框架，給構(gòu)建豐富交互地應(yīng)用帶來(lái)了所有功能，其中一項(xiàng)主要的特性是Angular對(duì)動(dòng)畫的支持。下面通過(guò)本文給大家介紹AngularJS中實(shí)現(xiàn)顯示或隱藏動(dòng)畫效果的方式總結(jié)，對(duì)angularjs動(dòng)畫效果相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)
2015-12-12
Angularjs編寫KindEditor,UEidtor,jQuery指令
使用過(guò) AngularJS 的朋友應(yīng)該最感興趣的是它的指令?，F(xiàn)今市場(chǎng)上的前端框架也只有AngularJS 擁有自定義指令的功能，并且AngularJS 是目前唯一提供Web應(yīng)用可復(fù)用能力的框架。
2015-01-01
Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng) 選擇地理位置
這篇文章主要介紹了Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，選擇地理位置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
Angularjs實(shí)現(xiàn)數(shù)組隨機(jī)排序的方法
今天小編就為大家分享一篇Angularjs實(shí)現(xiàn)數(shù)組隨機(jī)排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
詳解Angular組件生命周期(一)
每個(gè)Angular版本在其生命周期中都經(jīng)歷了各個(gè)階段。組件在Angular中起著關(guān)鍵作用; 在這里，本文將討論Angular中的組件生命周期以及它們?nèi)绾斡绊懣蚣芩邪姹镜纳芷凇?/div> 2021-05-05