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入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了AngularJS中table表格基本操作,涉及AngularJS針對(duì)table表格元素與屬性的相關(guān)動(dòng)態(tài)操作技巧,需要的朋友可以參考下2017-10-10
AngularJs驗(yàn)證重復(fù)密碼的方法(兩種)
本文給大家介紹angularjs驗(yàn)證重復(fù)密碼的兩種方法，每種方法都有各自的優(yōu)缺點(diǎn)，大家可以根據(jù)需要選擇一種方法，具體內(nèi)容詳情大家通過(guò)本文詳細(xì)了解下吧2016-11-11
這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí),包括AngularJS定義和特點(diǎn)以及構(gòu)建AngularJS應(yīng)用的方法，推薦給大家。2014-12-12
angular實(shí)現(xiàn)spa單頁(yè)面應(yīng)用實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)spa單頁(yè)面應(yīng)用實(shí)例，小本篇文章是對(duì)單頁(yè)面的一個(gè)簡(jiǎn)單的基本邏輯操作，這個(gè)方法可以搭建基本的單頁(yè)面的邏輯結(jié)構(gòu)。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
本文主要介紹AngularJS 事件處理器,這里整理了相關(guān)資料和示例代碼，有需要的小伙伴可以參考下2016-08-08
本篇文章主要介紹了淺談angular2 組件的生命周期鉤子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例
下面小編就為大家分享一篇Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angularjs在360兼容模式下取數(shù)據(jù)緩存問(wèn)題的解決辦法
這篇文章主要為大家詳細(xì)介紹了Angularjs在360兼容模式下取數(shù)據(jù)緩存問(wèn)題的解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
詳解angularjs結(jié)合pagination插件實(shí)現(xiàn)分頁(yè)功能
本篇文章主要介紹了詳解angularjs結(jié)合pagination插件實(shí)現(xiàn)分頁(yè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
Angular2中select用法之設(shè)置默認(rèn)值與事件詳解
在Angular.JS中可以使用數(shù)組或?qū)ο髣?chuàng)建一個(gè)下拉列表選項(xiàng)。關(guān)于Angular.js中select的基礎(chǔ)相信大家應(yīng)該都已經(jīng)了解了，那么下面這篇文章主要給大家介紹了Angular2中select用法之設(shè)置默認(rèn)值與事件的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-05-05