angularjs表 angularjs表|AngularJS教程

本文概述

以CSS样式显示
带有CSS的AngularJS表示例

【angularjs表】ng-repeat指令用于在AngularJS中绘制表。使用AngularJS显示表非常容易和简单。
让我们举个例子。本示例使用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样式显示你还可以使用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>

带有CSS的AngularJS表示例

< !DOCTYPE html> < html> < head> < title>Angular JS Table< /title> < script src = "http://ajax.googleapis.com/ajax/libs/angularjs/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>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> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "Rahul", lastName: "Rai", fees:500, subjects:[ {name:'Physics', marks:850}, {name:'Chemistry', marks:80}, {name:'Math', marks:90}, {name:'English', marks:80}, {name:'Hindi', marks:70} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); < /script> < /body> < /html>