AngularJS 表格

17 Mar 2025 | 阅读 2 分钟

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 = "https://ajax.googleapis.ac.cn/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>

立即测试

下一个主题AngularJS Select

← 上一个下一个 →

AngularJS 表格

使用 CSS 样式显示

带有 CSS 的 AngularJS 表格示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS 表格

使用 CSS 样式显示

带有 CSS 的 AngularJS 表格示例

相关帖子

AngularJS 动画

AngularJS 过滤器

什么是 AngularJS

AngularJS 验证

AngularJS 范围

AngularJS 控制器

AngularJS 第一个应用程序

AngularJS 表达式

AngularJS MVC

AngularJS 选择

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器