AngularJS中table表格基本操作示例
更新時(shí)間：2017年10月10日 12:13:23 作者：Zerone1993
這篇文章主要介紹了AngularJS中table表格基本操作,涉及AngularJS針對(duì)table表格元素與屬性的相關(guān)動(dòng)態(tài)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了AngularJS表格基本操作。分享給大家供大家參考，具體如下：
css內(nèi)容：
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
HTML正文：
<body ng-app="">
<div ng-init="persons=[{'name':'zhangsan','age':'20'},
{'name':'lisi','age':'19'},
{'name':'lisi','age':'19'}]">
<table>
<!-- $odd:下標(biāo)為奇數(shù)的元素 $even:下標(biāo)為偶數(shù)的元素 -->
<tr ng-repeat="x in persons">
<td>{{$index+1}}</td> <!-- 獲取元素的下標(biāo)值 -->
<!-- ng-if類似ms-if進(jìn)行布爾值判斷顯示 -->
<td ng-if="$odd" style="background-color:yellow"> {{ x.name }}</td>
<td ng-if="$even">{{ x.name }}</td>
<td ng-if="$odd" style="background-color:green"> {{ x.age }}</td>
<td ng-if="$even">{{ x.age }}</td>
</tr>
</table>
<span>{{persons[0]}}</span>
效果：
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
AngularJS輔助庫(kù)browserTrigger用法示例
這篇文章主要介紹了AngularJS輔助庫(kù)browserTrigger用法,結(jié)合實(shí)例形式分析了輔助庫(kù)browserTrigger的功能及單元測(cè)試中的使用技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí),包括AngularJS定義和特點(diǎn)以及構(gòu)建AngularJS應(yīng)用的方法，推薦給大家。2014-12-12
本文主要介紹AngularJS 服務(wù)，這里整理了AngularJS 服務(wù)的基本知識(shí)資料，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
Angular2實(shí)現(xiàn)自定義雙向綁定屬性
本篇文章主要介紹了Angular 2實(shí)現(xiàn)自定義 雙向綁定 屬性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
詳解基于Bootstrap+angular的一個(gè)豆瓣電影app
本篇文章主要介紹了基于Bootstrap+angular的一個(gè)豆瓣電影app ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
angularjs實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控(ng-change和watch兩種方式)
這篇文章主要介紹了angularjs通過(guò)ng-change和watch兩種方式實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控,需要的朋友可以參考下2018-08-08
angular2 組件之間通過(guò)service互相傳遞的實(shí)例
今天小編就為大家分享一篇angular2 組件之間通過(guò)service互相傳遞的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
理解AngularJs篇：30分鐘快速掌握AngularJs
這篇文章主要介紹了理解AngularJs篇：30分鐘快速掌握AngularJs，詳細(xì)介紹了AngularJs所涉及的知識(shí)點(diǎn)，有興趣的可以了解一下。2016-12-12
Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解
作為一種大受歡迎的Web應(yīng)用程序框架,Angular終于迎來(lái)了版本4.0，下面這篇文章主要給大家介紹了關(guān)于Angular 4.0學(xué)習(xí)教程之架構(gòu)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
AngularJS中directive指令使用之事件綁定與指令交互用法示例
這篇文章主要介紹了AngularJS中directive指令使用之事件綁定與指令交互用法,結(jié)合實(shí)例形式分析了directive指令在模板的使用，事件的綁定及元素、屬性、控制器之間的交互相關(guān)操作技巧,需要的朋友可以參考下2016-11-11