Os dados de uma tabela são normalmente repetidos. A diretiva ng-repeat pode ser usada para desenhar a tabela facilmente.
<table> <tr> <th>Nome</th> <th>Notas</th> </tr> <tr ng-repeat = "materia in aluno.materias"> <td>{{ materia.nome }}</td> <td>{{ materia.notas }}</td> </tr> </table>
O visual da tabela pode ser modificado:
<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>
Exemplo completo:
<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>Tabelas</h2> <div ng-app = "mainApp" ng-controller = "alunoController"> <table border = "0"> <tr> <td>Insira o nome:</td> <td><input type = "text" ng-model = "aluno.nome"></td> </tr> <tr> <td>Insira o sobrenome: </td> <td> <input type = "text" ng-model = "aluno.sobrenome"> </td> </tr> <tr> <td>Nome: </td> <td>{{aluno.nomeCompleto()}}</td> </tr> <tr> <td>Matérias:</td> <td> <table> <tr> <th>Nome</th>. <th>Notas</th> </tr> <tr ng-repeat = "materia in aluno.materias"> <td>{{ materia.nome }}</td> <td>{{ materia.notas }}</td> </tr> </table> </td> </tr> </table> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('alunoController', function($scope) { $scope.aluno = { nome: "Jack", sobrenome: "Bauer", valor:900, materias:[ {nome:'Português',notas:90}, {nome:'Química',notas:80}, {nome:'Matemática',notas:65}, {nome:'Inglês',notas:75}, {nome:'Física',notas:55} ], nomeCompleto: function() { var alunoObject; alunoObject = $scope.aluno; return alunoObject.nome + " " + alunoObject.sobrenome; } }; }); </script> </body> </html>
Saída:
Nenhum comentário:
Postar um comentário