current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I'm new to AngularJS - trying to build a pretty vanilla todo-list app. I can't figure out how to push the text value from the input box into the 'todos' array.

Here's my code.

HTML:

  <body ng-controller="MainCtrl">
    <div class="container">
      <div class="main">
        <p>Todo App</p>
        <input ng-model="todoList" type="text" name="input" placeholder="Enter tasks here">
        <button ng-click="addTodo()">Add</button>
        <ul>
          <li ng-repeat="todo in todos">
            {{todo}
          </li>
        </ul>
      </div>
    </div>
  </body>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.todoList = "";

  $scope.addTodo = function(){
    $scope.todos.push($scope.todoList)
  }

  $scope.clearAll = function(){
    $scope.todos = []
  }


});

Thanks in advance!

share|improve this question
    
What is the problem? Your code works fine! - JSFiddle Just } is missing in {{ todo } – valverde93 Jun 2 '15 at 14:00
up vote 1 down vote accepted

I guess it's just a typo in your template, try

{{todo}}

instead of

{{todo}

Everything else looks fine

Here is completed code: http://plnkr.co/edit/tRGw9UTRVhXvD51lxYjF?p=preview

I've also added track by $index statement to allow duplicated todos.

share|improve this answer
    
Cheers, can't believe I missed that. Is there a better way to do what I'm trying to do here? Would wrapping the input element in a form be a good practice to get into? – user3315570 Jun 2 '15 at 14:13
    
In my opinion - no. I'm think, forms semantically is containers for multiple inputs, related to one entity. Also form is used when you want to post/put something to the server without javascript. So I think there is no need to wrap single input to form. – Andrey Jun 2 '15 at 14:19
    
@user3315570 Why would you wrap it in a form if there is no use for it? Keep it simple. Als I have modified a fiddle from the comments and added this line to ng-repeat: track by $index because from Angular 1.2 and up it does not allow duplicates in arrays, so you have to track it with the index. jsfiddle.net/byw7kLuq/1 – Michelangelo Jun 2 '15 at 14:40
up vote 1 down vote

You are not using the module "plunker". You have to use ng-app to include the module.\

The updated and working code is 

HTML

<div class="container" data-ng-app="plunker" >
  <div class="main" data-ng-controller="MainCtrl">
    <p>Todo App</p>
    <input ng-model="todoList" type="text" name="input" placeholder="Enter tasks here">{{todoList}}
    <button ng-click="addTodo()">Add</button>
    <ul>
      <li ng-repeat="todo in todos">
        {{todo}}
      </li>
    </ul>
  </div>
</div>

JS

var app = angular.module('plunker',[]);
app.controller('MainCtrl', function($scope) {
$scope.todos = []
$scope.todoList = "";
$scope.addTodo = function(){
  $scope.todos.push($scope.todoList)
}
$scope.clearAll = function(){
  $scope.todos = []
 }
});

Hope it helps!!

share|improve this answer
up vote 0 down vote

maybe you can write this just to debug it a big

$scope.addTodo = function(todo) {
    // console.log(todo)
    $scope.todos.push(todo);
    // console.log($scope.todos)
}

in your template, call

<input ng-model="todo" // (not todoList)
<button ng-click="addTodo(todo)"> // (todo is local here)

one way to help yourself is do the following

  1. use lot of console, everyone is newbie once, just use tons of them until you understand the workflow

  2. use local variable, global variable is always confusing, even to a Pro.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.