How to solve the closure issue in angularjs

Question

I have a sample todo app in angularjs. My list of todos is an array. but everytime only the last value of array item is getting added to li's.

I have replicated the issue on a jsbin.

http://jsbin.com/simafuzidi/3/edit

I want the list of todo item to have all the fields that are typed in text boxes and not just the last one. I know this is a closure problem but I am not sure how to solve this in the current circumstances.

thanks

$scope.addTodo = function() {
  $scope.todos.push({text:$scope.todoText1,text:$scope.todoText2,text:$scope.todoText3,text:$scope.todoText4,done:false});
  $scope.todoText1 = '';
  $scope.todoText2 = '';
  $scope.todoText3 = '';
  $scope.todoText4 = '';
};




<form ng-submit="addTodo()">
        <input type="text" ng-model="todoText1"  size="30"
               placeholder="add new todo here1"><br />
        <input type="text" ng-model="todoText2"  size="30"
               placeholder="add new todo here2"><br />
        <input type="text" ng-model="todoText3"  size="30"
               placeholder="add new todo here3"><br />
         <input type="text" ng-model="todoText4"  size="30"
               placeholder="add new todo here4"><br />
         <input class="btn-primary" type="submit" value="add">
      </form>

@Satpal: I put a part of code, but you would be better off seeing the live problem. — Mike, Nov 04 '14 at 07:47

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

You should have seen console error in JSBIN and go through Does JSON syntax allow duplicate keys in an object?

Line 8: Duplicate key 'text'.

Code

$scope.todos = [
  {todoText1:'learn angular', 
   done:true
  },
  {
    todoText1:'build an angular app', done:false
  }];
$scope.addTodo = function() {
  $scope.todos.push(
    {
      todoText1:$scope.todoText1,
      todoText2:$scope.todoText2,
      todoText3:$scope.todoText3,
      todoText4:$scope.todoText4,
     done:false
    });
  $scope.todoText1 = '';
  $scope.todoText2 = '';
  $scope.todoText3 = '';
  $scope.todoText4 = '';
};

HTML

  <ul class="unstyled">
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">
      <span class="done-{{todo.done}}">{{todo.todoText1}} {{todo.todoText2}} {{todo.todoText3}} {{todo.todoText4}}</span>
    </li>
  </ul>

DEMO

edited May 23 '17 at 10:25

Community

1
1

answered Nov 04 '14 at 07:49

Satpal

132,252
13
159
168

Thanks, but it is not just how to fix, question is where does closure come into play here. – Mike Nov 04 '14 at 07:53
Don't suggest string concatenation as alternative to a object with multiple keys -.- – Cerbrus Nov 04 '14 at 07:56
No, it's not. It's a hacky / useless way to remove duplicate keys. I'm sure you can think of a better alternative than string concatenation. – Cerbrus Nov 04 '14 at 07:58

score 0 · Answer 2 · answered Nov 04 '14 at 07:57

0

I believe your push statement should look something like this.

  $scope.todos.push({text:$scope.todoText1,done:false},{text:$scope.todoText2,done:false},{text:$scope.todoText3,done:false},{text:$scope.todoText4,done:false});

If you want to push all items.

answered Nov 04 '14 at 07:57

Chandermani

42,589
12
85
88

That will create 4 todos, I just want todo one item and moreover I wanted to understand how can closures solve this problem in angularjs – Mike Nov 04 '14 at 08:00
@Cerbrus: are you telling me this isn't a closure problem http://jsbin.com/simafuzidi/3/edit – Mike Nov 04 '14 at 09:37

How to solve the closure issue in angularjs

2 Answers2