Los datos de categoría suelen ser de naturaleza repetitiva. La directiva NG-Repeat se puede usar para dibujar fácilmente tablas. El siguiente ejemplo ilustra el uso de la Directiva NG-Repeat para dibujar una tabla.
<Able> <tr> <th> name </th> <th> Marks </th> </tr> <tr ng-repeat = "sujeto en student.subjects"> <td> {{stater.name}} </td> <td> {{{Sujem.marks}} </td> </tr> </table>Las tablas se pueden diseñar utilizando estilos CSS, como sigue:
<style> Table, th, td {borde: 1px gris sólido; Colapso de borde: colapso; Pading: 5px;} Tabla TR: NTH-Child (Odd) {Background-Color: #F2F2F2;} Table TR: NTH-Child (incluso) {Background-Color: #FFFFFF;} </style>ejemplo
Los siguientes ejemplos mostrarán todas las instrucciones anteriores.
testangularjs.html
<html> <cead> <title> Angular JS Table </title> <style> Table, Th, Td {Border: 1px Solid Grey; Colapso de borde: colapso; RELLADO: 5PX;} TABLA TR: NTH-Child (ODD) {Background-Color: #F2F2F2;} Table TR: NTH-Child (incluso) {Color de fondo: #ffffff;} </ystye> </head> <body> <h2> AngularJS Sample Application </H2> <v ng-app = "" ng-Controller = "StudentController"> <table> <tr> <td> Ingrese el nombre de primer lugar: </td> <td> <input type = "text" ng-model = "student.firstname"> </td> </tr> <tr> <tr> <td> Ingrese el apellido: </td> <td> <input type = "text" ngmodel = "student.lastName"> </td> </tr> <tr> <tr> <td> name: </td> <td> {{stents.fullName ()}}} </td> </tr> ng-repeat = "temas en student.subjects"> <td> {{Sujem.name}} </td> <td> {{Sujem.Marks}} </td> </tr> </table> </tr> </table> </div> <script> studentController ($ scope) {$ scope.student = {{{{{ LastName: "Parashar", Tarifas: 500, asignaturas: [{name: 'física', marcas: 70}, {name: 'química', marca: 80}, {name: 'math', marcas: 65}, {name: 'inglés', marca: 75}, {nombre: 'hindi', marcas: 67}], completa: name: studentObject = $ scope.student; return studentObject.FirstName + "" + stententObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Producción
Abra textangularjs.html en un navegador web y vea los siguientes resultados:
Lo anterior es la compilación del conocimiento básico de las tablas AngularJS. Continuaremos ordenando el conocimiento relevante en el futuro. ¡Gracias por su apoyo para este sitio!