English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de AngularJS

Tablas de AngularJS

Los datos de la tabla suelen ser repetitivos. ng-La instrucción repeat se puede usar para dibujar tablas fácilmente. A continuación, se muestra un ejemplo de su uso con ng-instrucción repeat para dibujar tablas-

<table>
　　　<tr>
　　　　　　<th>Nombre</th>
　　　　　　<th>Calificaciones</th>
　　　</tr>
　　　
　　　<tr ng-repeat = "subject in student.subjects"
　　　　　　<td>{{ subject.name }}</</td>
　　　　　　<td>{{ subject.marks }}</</td>
　　　</tr>
</table>

Se puede usar CSS para establecer el estilo de la tabla.

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

Ejemplo en línea

El siguiente ejemplo muestra el uso de todas las instrucciones anteriores.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>AngularJS-Ejemplo de tabla</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/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>Aplicación de ejemplo AngularJS</h2>
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController"
　　　　　　　　　
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Introduzca el nombre:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.firstName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Introduzca el apellido: </td>
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<input type = "text" ng-model = "student.lastName"
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Nombre: </td>
　　　　　　　　　　　　　　　<td>{{ student.fullName() }}</</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Asunto:</td>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　　　　　<th>Nombre</th>.
　　　　　　　　　　　　　　　　　　　　　　　　<th>Calificaciones</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: "Mahesh",
　　　　　　　　　　　　　　　lastName: "Parashar",
　　　　　　　　　　　　　　　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;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Probar y ver‹/›

Resultado de salida

Abrir el archivo en el navegador webtestAngularJS.htmy ver los resultados.

DOM HTML de AngularJSFiltros de AngularJS