AngularJS 表Tables
时间:2021-11-23 作者:匿名
Table表数据通常是可重复的。 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样式化样式表。
<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.htm
<html> <head> <title>Angular JS Table</title> <script src = "https://www.yangzhiw.cn/static/js/angularjs-1.82/angular.min.js"></script> <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示例应用程序</h2> <div ng-app = "mainApp" ng-controller = "studentController"> <table border = "0"> <tr> <td>姓:</td> <td><input type = "text" ng-model = "student.firstName"></td> </tr> <tr> <td>名: </td> <td> <input type = "text" ng-model = "student.lastName"> </td> </tr> <tr> <td>名字: </td> <td>{{student.fullName()}}</td> </tr> <tr> <td>主题:</td> <td> <table> <tr> <th>科目</th>. <th>分数</th> </tr> <tr ng-repeat = "subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> </td> </tr> </table> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'物理',marks:70}, {name:'化学',marks:80}, {name:'数学',marks:65}, {name:'英语',marks:75}, {name:'北印度语',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> </body> </html>
输出
打开文件testAngularJS.htm在web浏览器并查看结果。