Separate UI state from todos so that todo.() doesn't affect what's hi…

…dden/shown on UI
nurpax · Feb 25, 2013 · 687e675 · 687e675
1 parent 63130b1
commit 687e675
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/static/todo.js b/static/todo.js
@@ -15,6 +15,7 @@ function TodoCtrl($scope, Todo, Tag, AppState) {
     AppState.setTags(Tag.query());
 
     $scope.todos = Todo.query();
+    $scope.todoShowDetails = [];
 
     $scope.addTodo = function() {
         var newTodo = { text:$scope.todoText, done:false };
@@ -29,6 +30,14 @@ function TodoCtrl($scope, Todo, Tag, AppState) {
         todo.$save();
     };
 
+    $scope.toggleShowDetails = function (todo) {
+        $scope.todoShowDetails[todo.id] = !$scope.todoShowDetails[todo.id];
+    }
+
+    $scope.showDetails = function (todo) {
+        return $scope.todoShowDetails[todo.id];
+    }
+
     // Persist immediate as clicked on
     $scope.setActivatesOn = function (todo) {
         todo.$save();

diff --git a/static/todos-partial.html b/static/todos-partial.html
@@ -17,12 +17,12 @@
 
         <div class="form-inline">
           <input type="checkbox" ng-model="todo.done" ng-click="checkTodo(todo)">
-          <label class="btn btn-link done-{{todo.done}}" ng-click="todo.showDetails = !todo.showDetails">
+          <label class="btn btn-link done-{{todo.done}}" ng-click="toggleShowDetails(todo)">
             {{todo.text}}
           </label>
         </div>
 
-        <div ng-show="todo.showDetails" ng-controller="TodoItemCtrl">
+        <div ng-show="showDetails(todo)" ng-controller="TodoItemCtrl">
           <form ng-submit="addTag()">
             <div class="form-inline">
               <input class="input-mini" type="text" ng-model="tagText" size="20"