Permalink
Browse files

AngularJS Update (in-line editing)

  • Loading branch information...
amejiarosario committed Oct 3, 2014
1 parent 2484107 commit b6394448e1e1e8384815877df764507d6562dc4d
Showing with 35 additions and 5 deletions.
  1. +35 −5 views/index.ejs
View
@@ -19,17 +19,25 @@
Search: <input type="text" ng-model="search.name">
<ul>
<li ng-repeat="todo in todos | filter: search">
<input type="checkbox" ng-model="todo.completed">
<a href="#/{{todo._id}}">{{todo.name}}</a>
<input type="checkbox" ng-model="todo.completed" ng-change="update($index)">
<a ng-show="!editing[$index]" href="#/{{todo._id}}">{{todo.name}}</a>
<button ng-show="!editing[$index]" ng-click="edit($index)">edit</button>
<input ng-show="editing[$index]" type="text" ng-model="todo.name">
<button ng-show="editing[$index]" ng-click="update($index)">update</button>
<button ng-show="editing[$index]" ng-click="cancel($index)">cancel</button>
</li>
</ul>
New task <input type="text" ng-model="newTodo"><button ng-click="save()">Create</button>
</script>
<script type="text/ng-template" id="/todoDetails.html">
<h1>{{ todo.name }}</h1>
completed: <input type="checkbox" ng-model="todo.completed">
note: <textarea>{{ todo.note }}</textarea>
completed: <input type="checkbox" ng-model="todo.completed"><br>
note: <textarea ng-model="todo.note"></textarea><br><br>
<button ng-click="update()">update</button>
<a href="/">Cancel</a>
</script>
<script>
@@ -50,6 +58,7 @@
//---------------
.controller('TodoController', ['$scope', 'Todos', function ($scope, Todos) {
$scope.editing = [];
$scope.todos = Todos.query();
$scope.save = function(){
@@ -61,10 +70,31 @@
$scope.newTodo = ''; // clear textbox
});
}
$scope.update = function(index){
var todo = $scope.todos[index];
Todos.update({id: todo._id}, todo);
$scope.editing[index] = false;
}
$scope.edit = function(index){
$scope.editing[index] = angular.copy($scope.todos[index]);
}
$scope.cancel = function(index){
$scope.todos[index] = angular.copy($scope.editing[index]);
$scope.editing[index] = false;
}
}])
.controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', function ($scope, $routeParams, Todos) {
.controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', '$location', function ($scope, $routeParams, Todos, $location) {
$scope.todo = Todos.get({id: $routeParams.id });
$scope.update = function(){
Todos.update({id: $scope.todo._id}, $scope.todo, function(){
$location.url('/');
});
}
}])
//---------------

0 comments on commit b639444

Please sign in to comment.