Maquetación combinando HTML5 y CSS3
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Table</title>
<script src="angular.min.js"></script>
<style>
table, th , td {
border: 1px solid blue;
border-collapse: collapse;
padding: 2px;
}
table tr:nth-child(odd) {
background-color: #54A0CD;
}
table tr:nth-child(even) {
background-color: #7CBBF2;
}
</style>
</head>
<body>
<h2>AngularJS Table</h2>
<div ng-app="mainApp" ng-controller="AlumnoController">
<table border="0">
<tr><td>Nombres:</td><td><input type="text" style="background-color:#54A0CD" ng-model="Alumno.pNom"></td></tr>
<tr><td>Apellidos: </td><td><input type="text" style="background-color:#54A0CD" ng-model="Alumno.pApe"></td></tr>
<tr><td>Nombres y Apellidos: </td><td>{{Alumno.pApeNom()}}</td></tr>
<tr><td>Pensión: </td><td>{{Alumno.pPens | currency:"S/."}}</td></tr>
<tr><td>Cursos:</td><td>
<table>
<tr>
<th>curso</th>
<th>cod</th>
</tr>
<tr ng-repeat="Cursos in Alumno.mCursos">
<td>{{ Cursos.curso }}</td>
<td>{{ Cursos.cod }}</td>
</tr>
</table>
</td></tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('AlumnoController', function ($scope) {
$scope.Alumno = {
pNom: "SEGUNDO HADSON",
pApe: "PAREDES CORDOVA",
pPens: 1230,
mCursos: [
{ curso: 'Diseño de Proceso', cod: 70 },
{ curso: 'Ingenieria de Requerimiento', cod: 80 },
{ curso: 'Gestión de Proyecto', cod: 65 }
],
pApeNom: function () {
var AlumnoObject;
AlumnoObject = $scope.Alumno;
return AlumnoObject.pNom + " " + AlumnoObject.pApe;
}
};
});
</script>
</body>
</html>
Resultado de maquetación
AngularJS Table
| Nombres: | |||||
| Apellidos: | |||||
| Nombres y Apellidos: | {{Alumno.pApeNom()}} | ||||
| Pensión: | {{Alumno.pPens | currency:"S/."}} | ||||
| Cursos: |
|
Como resultado de nuestra ejecución
Espero que revisen mucho mas de este Framework en mi opinión es una muy buena alternativa para poder realizar paginas SPA para nutrir nuestro Front End. Mejor aun si implementamos con JQuery y AngularJS.
Link para la descarga de todos los ejemplos - Test incluyendo el AngularJS.js
1 Comentarios
excelente gracias...!!!
ResponderBorrar