up vote 1 down vote favorite

I try to do TODO list using Angular.js I have function addTask, but it dosen't work. I try to give it project and than get array of tasks. In Chrome I see this mistake "Cannot read property 'tasks' of undefined" This is my app.js

    var app = angular.module('toDoList', ['ngDialog']);
        app.controller('MainCtrl', [
          '$scope',
          '$rootScope',
          'ngDialog',
          function($scope, $rootScope, ngDialog){
      $scope.test = 'Hello world!';

    $scope.projects = [
      {id: '1', title: 'For Home', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]},
      {id: '2', title: 'For Work', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]}
    ];

    $scope.addProject = function(){
      if(!$scope.title || $scope.title === '') { return; }
      $scope.projects.push({
        title: $scope.title
      });
    };

    $scope.addTask = function(project){

      $scope.project.tasks.push({
        title: $scope.tasktitle, done: false
      });
}]);

This is my html code

    <body ng-app="toDoList" ng-controller="MainCtrl">
  <div class="project" ng-repeat="project in projects">
    <span class="title">{{project.title}}</span>
      <form name="frm" ng-submit="addTask(project)">
        <input 
          type="text" 
          class="form-control" 
          placeholder="Start to type task"
          ng-model="tasktitle">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Add Task</button>
        </span>
      </form>
    <ul class="todo-list">             
      <li ng-repeat="task in project.tasks">
        <input type="checkbox" ng-model="task.done">
        <span ng-class="{done:task.done}">{{task.title}}</span>
      </li>
    </ul>
  </div>
</body>

How can I push my data about task?

This is doesn't work: 

$scope.addTask = function(project){

  $scope.project.tasks.push({
    title: $scope.tasktitle, done: false
  });

};
share|improve this question
up vote 2 down vote accepted

First and foremost, you're missing an 's' in $scope.project.tasks.push. It should be projects, so as to match up with the scope variable.

Second, you're not actually choosing a project to push to. $scope.projects is an Array. You would need to choose an index to push to. Here's what I think you're going for:

HTML

<form name="frm" ng-submit="addTask(project.id, tasktitle)">

Javascript

$scope.addTask = function(id, task){

  $scope.projects[id].tasks.push({
    title: task
    , done: false
  });

};

EDIT: Working codepen at: codepen.io/Pangolin-/pen/YPVwye – Pangolin

share|improve this answer
    
unfortunately it does not work( The same error: "Cannot read property 'tasks' of undefined" – Ivan Prokopenko Jan 18 '15 at 19:23
    
I've made a working Codepen for you. There were a couple syntax errors and the Array was not zero-based, so I changed the tasks to match up with them. Should work now! codepen.io/Pangolin-/pen/YPVwye – Pangolin Jan 18 '15 at 21:29
up vote 0 down vote

I could fix this, but i don't know is it right?

HTML

<form name="frm" ng-submit="addTask(project.tasks, tasktitle)" class="input-group">

Javascript

   $scope.addTask = function(project, value){
   project.push({
    title: value
  });
share|improve this answer
    
When you refer addTask() from the view, you're passing a tasks array and a string. It should match the addTask() signature: function(tasks, title). Then update your code to tasks.push(...) – André Werlang Jan 19 '15 at 0:05

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.