Подробное объяснение таблицы AngularJS и образца кода

Автор：Eve Cole Время обновления：2025-07-29 11:16:01

Данные категории обычно носят повторяющиеся по своей природе. Директива NG-Repeat может использоваться для легкого рисования таблиц. Следующий пример иллюстрирует использование директивы NG-Repeat для рисования таблицы.

 <table> <tr> <th> name </th> <Th> marks </th> </tr> <tr ng-repeat = "Субъект в student.subjects"> <td> {{subject.name}} </td> <td> {{subject.marks}} </td> </tr> </table> {{subj

Таблицы могут быть стилизованы с использованием стилей CSS следующим образом:

 <style> таблица, th, td {border: 1px solid grey; пограничный коллапс: коллапс; Подкладка: 5px;} Таблица Tr: nth-child (ODD) {foangy-color: #f2f2f2;} Таблица Tr: nth-child (даже) {фоновый цвет: #ffffff;} </style>

пример

В следующих примерах будут показаны все вышеперечисленные инструкции.

testangularjs.html

 <html> <head> <Title> Angular JS Table </title> <style> Таблица, TH, TD {Border: 1px Solid Grey; пограничный коллапс: коллапс; ПЛАДИНА: 5PX;} Таблица TR: NTH-Child (ODD) {FOOLANE-COLOR: #F2F2F2;} Таблица TR: NTH-CHILD (даже) {фоновое цветное: #ffffff;} </style> </head> <hody> <h2> angularjs Применение </h2> <div ng-app = "" ng-controller = "StudentController"> <Table> <tr> <td> Введите имя: </td> <td> <input type = "text" ng-model = "student.firstname"> </td> </tr> <tr> <td> Введите фамилию: </td> <td> <input = " ng-model = "Student.lastname"> </td> </tr> <tr> <td> Имя: </td> <td> {{study.fullname ()}} </td> </tr> <tr> <td> Субъект: </td> <td> <tale> <tr> <t.> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> ng-repeat = "Субъект в student.subjects"> <td> {{subject.name}} </td> <td> {{subject.marks}} </td> </tr> </table> </tr> </table> </div> <script> functionControler ($ scope). LASTNAME: «Parashar», сборы: 500, субъекты: [{name: «Физика», оценки: 70}, {name: «Химия», Marks: 80}, {name: 'Math', Marks: 65}, {name: 'English', Marks: 75}, {name: 'hindi', marks: 67}, fuldname:). StudentObject = $ scope.student; return studentObject.firstName + "" + studentObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>

Выход

Откройте TextAngularJs.html в веб -браузере и посмотрите следующие результаты:

Выше представлено сборник основных знаний таблиц AngularJS. Мы будем продолжать разобраться в соответствующих знаниях в будущем. Спасибо за поддержку этого сайта!