Os dados da categoria são geralmente de natureza repetitiva. A diretiva NG-REPEAT pode ser usada para desenhar tabelas facilmente. O exemplo a seguir ilustra o uso da diretiva NG-REPEAT para desenhar uma tabela.
<table> <tr> <th> nome </th> <th> marcas </th> </tr> <tr ng-repeat = "Assunto em Student.subjects"> <td> {{sujeito.name}} </td> <td> {{sujeito.marks}}} </td> </tr>As tabelas podem ser estilizadas usando estilos CSS, como segue:
<yoy> tabela, th, td {borda: 1px cinza sólido; colapso da fronteira: colapso; preenchimento: 5px;} tabela tr: nth-child (ímpar) {background-color: #f2f2f2;} tabela tr: nth-child (par) {background-color: #ffffff;} </style>exemplo
Os exemplos a seguir mostrarão todas as instruções acima.
testangularjs.html
<html> <head> <title> tabela angular js </title> <yoy> tabela, th, td {borda: 1px cinza sólido; colapso da fronteira: colapso; preenchimento: 5px;} tabela TR: nth-child (ímpar) {Background-Color: #f2f2f2;} tabela tr: nth-child (par) {background-color: #ffffff;} </style> </ad Head> <body> <h2> aplicação de amostra angularjs </h2> <div ng-app => " ng-Controller = "StudentController"> <table> <tr> <td> digite o primeiro nome: </td> <td> <input type = "text" ng-model = "student.firstname"> </td> </tr> <tr> <td> digite o sobrenome: </td> <td> <input> </typing = <tr> <td> digite o sobrenome. ng-model = "student.lastName"> </td> </tr> <tr> <td> nome: </td> <td> {{student.fullname ()}} </td> </tr> <tr> <td> assunto: </td> <td> <tlay> <tr> ng-repeat = "Assunto em Student.subjects"> <td> {{sujeito.name}} </td> <td> {{subject.marks}} </td> </tr> </ table> </tr> </table> </div> 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; Retorne statãobject.firstname + "" + studpobject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </sCript> </body> </html>Saída
Open textangularjs.html em um navegador da web e veja os seguintes resultados:
O exposto acima é a compilação do conhecimento básico das tabelas AngularJS. Continuaremos a resolver o conhecimento relevante no futuro. Obrigado pelo seu apoio a este site!