詳解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é)果:
相關(guān)文章
Agularjs妙用雙向數(shù)據(jù)綁定實現(xiàn)手風(fēng)琴效果
最近在工作總遇到需要實現(xiàn)類似手風(fēng)琴效果的需求,下面小編通過本文給大家分享angularjs巧用雙向數(shù)據(jù)綁定實現(xiàn)手風(fēng)琴效果,需要的朋友可以參考下2017-05-05Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
在Angular的原生指令中有這幾個指令用來控制元素的展示與否,ng-show/ng-hide/ng-if和ng-switch。在angular性能優(yōu)化中,我們也常常會用到它。這篇文章主要給大家介紹了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程,需要的朋友可以參考。2017-05-05AngularJS模態(tài)框模板ngDialog的使用詳解
這篇文章主要介紹了AngularJS模態(tài)框模板ngDialog的使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05詳解Angular結(jié)合zTree異步加載節(jié)點數(shù)據(jù)
本篇文章主要給大家分享了Angular結(jié)合zTree異步加載節(jié)點數(shù)據(jù)的難點以及方法,有這方面需求的朋友參考下吧。2018-01-01詳解Angular Forms中自定義ngModel綁定值的方式
在Angular應(yīng)用中有兩種方式來實現(xiàn)表單綁定,但是對于一些特殊的表單控件沒法實現(xiàn),這篇文章主要介紹了詳解Angular Forms中自定義ngModel綁定值的方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12angular4自定義組件非input元素實現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了angular4自定義組件非input元素實現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12