Компьютерапия

AngularJS - Таблицы

Категория: AngularJS
Просмотров: 5200

Данные таблицы в AngularJS обычно повторяемы по своей природе. Директива 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 Styling.

<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>

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

пример

Следующий пример продемонстрирует всю вышеупомянутую директиву.

<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: "Ivan",
               lastName: "Ivanov",
               fees:500,
              
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65},
                  {name:'English',marks:75}
                ],
              
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
     
   </body>
</html>

Выглядеть это будет так:

Enter first name:
Enter last name:
Name: {{student.fullName()}}
Subject: .
NameMarks
{{ subject.name }} {{ subject.marks }}



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok