جداول AngularJS

تكون بيانات الجدول عادةً متكررة. يمكن استخدام تعليمات ng-repeat لرسم الجدول بسهولة. يظهر السطر التالي استخدام تعليمات ng-repeat لرسم الجدول-

<table>
　　　<tr>
　　　　　　<th>الاسم</th>
　　　　　　<th>Marks</th>
　　　</tr>
　　　
　　　<tr ng-repeat="subject in student.subjects">
　　　　　　<td>{{ subject.name }}</td>
　　　　　　<td>{{ subject.marks }}</td>
　　　</tr>
</table>

يمكن استخدام أنماط CSS لتعيين نمط الجدول. يمكن تعيين نمط الجدول باستخدام 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>AngularJS-表格示例</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/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 Sample Application</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>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>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($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>
　　　　　　
　　　</body>
</html>

اختبار أمر‹/›

إخراج النتائج

افتح ملف في متصفح الويبtestAngularJS.htmوشاهد النتائج.

HTML DOM AngularJS مصفيات AngularJS

دليل AngularJS الأساسي

جداول AngularJS

مثال على الإنترنت

testAngularJS.htm