exploring Angular, I built a simple to-do list. Codepen: http://ift.tt/2lAsmmy
My issue is that when I use the checkbox to delete an item, say the very last one, the item is deleted but the checkbox above it becomes "checked." I just want to be able to delete the item via the checkbox and all the other checkboxes will remain unchecked. I can't figure the bug here. Dimly, I was thinking I needed to reset the "checked" variable, but that wasn't working.
angular.module('ToDo', [])
.controller('ToDoController', function ($scope, ToDoService) {
$scope.items = ToDoService.items;
$scope.checked = false;
$scope.add = function() {
ToDoService.add($scope.todo);
};
$scope.deleteItem = function() {
ToDoService.deleteItem();
};
$scope.remove = function(idx) {
this.items.splice(idx, 1);
console.log("test inside remove");
return this.items;
};
})
.factory('ToDoService', function () {
return {
items: [],
add: function(todo) {
this.items.push({todo: todo, time: new Date()});
},
deleteItem: function(idx) {
this.items.splice(idx, 1);
console.log("test inside deleteItem");
}
};
});
<html ng-app='ToDo'>
<head>
<title>My Angular To-Do App</title>
<script src="http://ift.tt/1DTrZWe"></script>
<script src='app.js'></script>
<link rel="stylesheet" href="http://ift.tt/1K1B2rp">
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Angular To-Do App</a>
</div>
</div>
</nav>
<div class="container todos" ng-controller='ToDoController'>
<div class="starter-template">
<h1>My To-Do's</h1>
<div class="alert alert-info" role="alert" ng-show="!items.length">
No to-do items have been added yet.
</div>
<ul>
<li ng-repeat='item in items'> - <a class="btn" ng-click="remove()">Delete</a>
<input type="checkbox" ng-model="checked" ng-change="deleteItem(checked)" >
</li>
</ul>
<form class="form-inline">
<input type='text' ng-model='todo' class="form-control" />
<button ng-click='add()' class="btn btn-default">Add</button>
</form>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire