<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.tarea-terminada {
text-decoration: line-through;
}
</style>
</head>
<body ng-app="listaDeCosasPorHacer">
<div ng-controller="controladorPrincipal">
<form ng-submit="agregarTareaNueva()">
<input ng-model="tareaNueva">
<input type="submit" value="Agregar">
</form>
<hr>
<ul>
<li ng-repeat="tarea in tareas">
<input type="checkbox" id="{{tarea}}" ng-model="tarea.completada">
<!-- la sinaxis de un ng-class es similar a la de un objeto en JavaScript: primero va el nombre de la clase dentro de comillas, a continuación ":" y finalmente la condición a evaluar. La clase aplicará cuando la condición sea verdadera.
Podemos encadenar varias condiciones separadas por comas -->
<label for="tarea" ng-class="{'tarea-terminada': tarea.completada}">{{tarea.nombre}}</label>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
angular
.module('listaDeCosasPorHacer', []);
angular
.module('listaDeCosasPorHacer')
.controller('controladorPrincipal', controladorPrincipal);
function controladorPrincipal($scope){
$scope.tareas = [
{nombre: "Aprender AngularJS", completada: false},
{nombre: "Dejar un comentario", completada: false},
{nombre: "No usar Internet Explorer", completada: true}
]
$scope.agregarTareaNueva = function(){
// Hacemos un push al array de tareas
// pasando como valor $scope.tareaNueva
$scope.tareas.push({nombre: $scope.tareaNueva, completada: false});
//Borramos el texto que habíamos puesto en el < input >
$scope.tareaNueva = '';
}
}
</script>
</body>
</html>