CODEWITHSUNDEEP
angularjspush
Ivan Prokopenko
Ivan Prokopenko

Reputation: 13

Angular. Push array in array

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
  });

};

Upvotes: 1

Views: 1778

Answers (2)

Pangolin
Pangolin

Reputation: 176

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

Upvotes: 2

Ivan Prokopenko
Ivan Prokopenko

Reputation: 13

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
  });

Upvotes: 0

Related Questions