AngularJS表格詳解及示例代碼
格數(shù)據(jù)本質(zhì)上通常是重復(fù)的。ng-repeat指令,可以用來方便地繪制表格。下面的示例說明使用ng-repeat指令來繪制表格。
<table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table>
表格可以使用CSS樣式設(shè)置樣式,如下:
<style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style>
例子
下面的例子將展示上述所有指令。
testAngularJS.html
<html> <head> <title>Angular JS Table</title> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app="" ng-controller="studentController"> <table border="0"> <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr> <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr> <tr><td>Name: </td><td>{{student.fullName()}}</td></tr> <tr><td>Subject:</td><td> <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> </td></tr> </table> </div> <script> function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
輸出
在Web瀏覽器打開textAngularJS.html,看到以下結(jié)果:
以上就是AngularJS表格基礎(chǔ)知識(shí)的整理,后續(xù)繼續(xù)整理相關(guān)知識(shí),謝謝大家對(duì)本站的支持!
相關(guān)文章
Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-07-07Angular.js通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-10-10Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面(推薦)
這篇文章主要介紹了Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向,實(shí)現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面,這個(gè)功能在網(wǎng)上商城項(xiàng)目上經(jīng)常會(huì)用到,下面小編給大家?guī)砹私鉀Q方法一起看看吧2018-05-05Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)
下面小編就為大家?guī)硪黄狝ngular中使用$watch監(jiān)聽object屬性值的變化(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04angularJS實(shí)現(xiàn)動(dòng)態(tài)添加,刪除div方法
下面小編就為大家分享一篇angularJS實(shí)現(xiàn)動(dòng)態(tài)添加,刪除div方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02利用Angular+Angular-Ui實(shí)現(xiàn)分頁(代碼加簡(jiǎn)單)
這篇文章主要介紹了利用Angular+Angular-Ui實(shí)現(xiàn)分頁,利用Angular+Angular-Ui實(shí)現(xiàn)的分頁分頁代碼更加簡(jiǎn)單,更加容易懂哦,相信本文的內(nèi)容對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03AngularJS實(shí)現(xiàn)在ng-Options加上index的解決方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)在ng-Options加上index的解決方法,結(jié)合實(shí)例形式分析了AngularJS在ngOptions添加索引的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04詳解angularjs popup-table 彈出框表格指令
本篇文章主要介紹了angularjs popup-table 彈出框表格指令,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09