<!DOCTYPE html>
<html ng-app="mascotas">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ControladorPrincipal">
<p>Registremos una mascota</p>
<input type="text" ng-model="mascota.nombre" placeholder="Nombre" />
<br />
<br />
<input type="number" ng-model="mascota.edad" placeholder="Edad" />
<br />
<br />
<button ng-click="agregar(mascota)">Guardar</button>
<br />
<br />
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mascota in mascotas track by $index">
<td>{{mascota.nombre}}</td>
<td>{{mascota.edad}}</td>
</tr>
</tbody>
</table>
<h1>angular.copy</h1>
<p>angular.copy sirve para crear un nuevo objeto a partir de uno ya existente, pero sin mantener la referencia.
<br> De esta forma, aunque el objeto original sufra cambios, éstos no se verán reflejados en los demás.
<br> Probemos poniendo objetos en un arreglo con angular.copy
</p>
</body>
</html>
// Code goes here
(function(angular) {
angular.module("mascotas", [])
.controller("ControladorPrincipal", ["$scope", function($scope) {
$scope.mascotas = [];
$scope.agregar = function(mascota) {
if (mascota.nombre && mascota.edad)
$scope.mascotas.push(angular.copy(mascota));
};
}]);
})(angular);
/* Styles go here */