AngularJS基础知识笔记之表格
表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。
<table> <tr> <th>Name</th> <th>Marks</th> </tr> <trng-repeat="subjectinstudent.subjects"> <td>{{subject.name}}</td> <td>{{subject.marks}}</td> </tr> </table>
表格可以使用CSS样式设置样式,如下:
<style> table,th,td{ border:1pxsolidgrey; border-collapse:collapse; padding:5px; } tabletr:nth-child(odd){ background-color:#f2f2f2; } tabletr:nth-child(even){ background-color:#ffffff; } </style>
例子
下面的例子将展示上述所有指令。
testAngularJS.html
<html> <head> <title>AngularJSTable</title> <style> table,th,td{ border:1pxsolidgrey; border-collapse:collapse; padding:5px; } tabletr:nth-child(odd){ background-color:#f2f2f2; } tabletr:nth-child(even){ background-color:#ffffff; } </style> </head> <body> <h2>AngularJSSampleApplication</h2> <divng-app=""ng-controller="studentController"> <tableborder="0"> <tr><td>Enterfirstname:</td><td><inputtype="text"ng-model="student.firstName"></td></tr> <tr><td>Enterlastname:</td><td><inputtype="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> <trng-repeat="subjectinstudent.subjects"> <td>{{subject.name}}</td> <td>{{subject.marks}}</td> </tr> </table> </td></tr> </table> </div> <script> functionstudentController($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(){ varstudentObject; studentObject=$scope.student; returnstudentObject.firstName+""+studentObject.lastName; } }; } </script> <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。