首页 > 语言 > JavaScript > 正文

AngularJS基础知识笔记之表格

2024-05-06 16:19:49
字体:
来源:转载
供稿:网友

这篇文章主要介绍了AngularJS基础知识笔记之表格的相关资料,需要的朋友可以参考下

表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。

 

 
  1. <table> 
  2. <tr> 
  3. <th>Name</th> 
  4. <th>Marks</th> 
  5. </tr> 
  6. <tr ng-repeat="subject in student.subjects"
  7. <td>{{ subject.name }}</td> 
  8. <td>{{ subject.marks }}</td> 
  9. </tr> 
  10. </table> 

表格可以使用CSS样式设置样式,如下:

 

 
  1. <style> 
  2. table, th , td { 
  3. border: 1px solid grey; 
  4. border-collapse: collapse; 
  5. padding: 5px; 
  6. table tr:nth-child(odd) { 
  7. background-color: #f2f2f2; 
  8. table tr:nth-child(even) { 
  9. background-color: #ffffff; 
  10. </style> 

例子

下面的例子将展示上述所有指令。

testAngularJS.html

 

 
  1. <html> 
  2. <head> 
  3. <title>Angular JS Table</title> 
  4. <style> 
  5. table, th , td { 
  6. border: 1px solid grey; 
  7. border-collapse: collapse; 
  8. padding: 5px; 
  9. table tr:nth-child(odd) { 
  10. background-color: #f2f2f2; 
  11. table tr:nth-child(even) { 
  12. background-color: #ffffff; 
  13. </style> 
  14. </head> 
  15. <body> 
  16. <h2>AngularJS Sample Application</h2> 
  17. <div ng-app="" ng-controller="studentController"
  18. <table border="0"
  19. <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr> 
  20. <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr> 
  21. <tr><td>Name: </td><td>{{student.fullName()}}</td></tr> 
  22. <tr><td>Subject:</td><td> 
  23. <table> 
  24. <tr> 
  25. <th>Name</th> 
  26. <th>Marks</th> 
  27. </tr> 
  28. <tr ng-repeat="subject in student.subjects"
  29. <td>{{ subject.name }}</td> 
  30. <td>{{ subject.marks }}</td> 
  31. </tr> 
  32. </table> 
  33. </td></tr> 
  34. </table> 
  35. </div> 
  36. <script> 
  37. function studentController($scope) { 
  38. $scope.student = { 
  39. firstName: "Mahesh"
  40. lastName: "Parashar"
  41. fees:500, 
  42. subjects:[ 
  43. {name:'Physics',marks:70}, 
  44. {name:'Chemistry',marks:80}, 
  45. {name:'Math',marks:65}, 
  46. {name:'English',marks:75}, 
  47. {name:'Hindi',marks:67} 
  48. ], 
  49. fullName: function() { 
  50. var studentObject; 
  51. studentObject = $scope.student; 
  52. return studentObject.firstName + " " + studentObject.lastName; 
  53. }; 
  54. </script> 
  55. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
  56. </body> 
  57. </html> 

以上所述就是本文的全部内容了,希望大家能够喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选