how to add an element to a sub list in angularJS?

Question

I am very new to angular so bear with me. I am trying to add a task to a list in my code and it seems like it is not finding the specific list to push the task to from the form. how can i debug what is the form posting to the addTask function?

application.html

[![<!DOCTYPE html>
<html>
<head>
  <title>NgRailsTodoList</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <style type="text/css" media="all">
    .strikethrough{
      text-decoration:line-through;
    }
  </style>

</head>

<body ng-app="todoApp" ng-controller="MainCtrl">

  <div class="container">

    <div class="row">
      <div class="col-md-12">
      <h1 class="content-title text-center">Todo</h1>
        <!--taks -->
        <div ng-repeat="list in lists">
          <h3>{{list.name}}</h3>
          <div ng-repeat="task in list.tasks">
            <h5><input type="checkbox" ng-checked="task.completed" ng-model="task.completed"><span ng-class="task.completed ? 'strikethrough':''">{{ task.body }}</span></h5>
          </div>
        </div>
        <form ng-submit="addTask()">
          <input type="text" ng-model="body"></input>
          <button type="submit" class="btn"> New Task </button>
        </form>
      </div>
    </div>

    <!-- add new list -->
    <div class="row">
      <hr />
      <div class="col-md-3">
        <div >
          <form ng-submit="addList()">
            <input type="text" ng-model="name" ></input>
            <span >
              <button type="submit" class="btn"> New List </button>
            </span>
          </form>
        </div>
      </div>
    </div>

  <!--end container-->
  </div>

</body>
</html>][1]][1]

app.js

angular.module('todoApp', ['ui.router','ui.bootstrap','templates'])
.factory('lists',[ function () {
  var o = { lists: [{ name: "groceries", completed: false,
            tasks: [{body: "buy fish",completed: true},
                {body: "buy sushi",completed: false},
                {body: "buy bread",completed: true}]}]
      };
  return o;
}])
.controller('MainCtrl', [
  '$scope','lists',
   function($scope,lists){
     $scope.lists = lists.lists;
     $scope.addList = function(){
       console.log(lists);
       if(!$scope.name || $scope.name === '') { return;  }
       $scope.lists.push({name: $scope.name, completed: false})
     };

     $scope.addTask = function(){
       console.log(this.body);
       if(!$scope.body || $scope.body === '') { return;  }
       $scope.list.tasks.push({name: $scope.body, completed: false})
     }
   }
 ]);

Yin Gang · Accepted Answer · 2016-05-20 01:53:04Z

Full demo here

By Array.push() to add element to list is correct. But, error happens when you attempted add a task by

$scope.list.tasks.push({name: $scope.body, completed: false});

As you dont have a list on $scope, but a lists, an objects array.

Add to sub list, the first things is to figure out which sub list should be.

By your logic, need to select which list to add the task to, so, put an <select> before input task body, fetch targetList first, then add the task to it.

// Code goes here



angular.module('todoApp', [])
  .factory('lists', [
    function() {
      var o = {
        lists: [{
          name: "groceries",
          completed: false,
          tasks: [{
            body: "buy fish",
            completed: true
          }, {
            body: "buy sushi",
            completed: false
          }, {
            body: "buy bread",
            completed: true
          }]
        }]
      };
      return o;
    }
  ])
  .controller('MainCtrl', [
    '$scope', 'lists',
    function($scope, lists) {
      $scope.lists = lists.lists;
      $scope.targetList = $scope.lists[0];
      $scope.addList = function() {
        if (!$scope.name || $scope.name === '') {
          return;
        }
        $scope.lists.push({
          name: $scope.name,
          completed: false,
          tasks: [],
          newTaskBody:''
        });
        $scope.name = '';
      };

      $scope.addTask = function(index) {
        var newTaskBody = $scope.lists[index].newTaskBody;
        if(!newTaskBody){
          return false;
        }
        $scope.lists[index].tasks.push({
          body:newTaskBody,
          completed:false
        });
        $scope.lists[index].newTaskBody = '';
      }
    }
  ]);

/* Styles go here */

.strikethrough {
  text-decoration: line-through;
}

<html>

<head>
  <title>NgRailsTodoList</title>
  <link rel="stylesheet" href="style.css">
  <script src="//cdn.bootcss.com/angular.js/1.4.7/angular.js"></script>
  <script src="script.js"></script>


</head>

<body ng-app="todoApp" ng-controller="MainCtrl">

  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <h1 class="content-title text-center">Todo</h1>
        <!--taks -->
        <div ng-repeat="list in lists track by $index">

          <h3>{{list.name}}</h3>
          <div ng-repeat="task in list.tasks">
            <h5><input type="checkbox" ng-checked="task.completed" ng-model="task.completed"><span ng-class="task.completed ? 'strikethrough':''">{{ task.body }}</span></h5>
          </div>

          <form ng-submit="addTask($index)">
            add task to list:
            <input type="text" ng-model="list.newTaskBody" />
            <button type="submit" class="btn">New Task</button>
          </form>

        </div>
      </div>
    </div>

    <!-- add new list -->
    <div class="row">
      <hr />
      <div class="col-md-3">
        <div>
          <form ng-submit="addList()">
            <input type="text" ng-model="name" />
            <span>
              <button type="submit" class="btn"> New List </button>
            </span>
          </form>
        </div>
      </div>
    </div>

    <!--end container-->
  </div>

</body>

</html>

this really awesome. what i had in mind was more like adding a new task input to each list. in that case how can i find the target list
Demo updated. Notice, ng-repeat="list in lists track by $index" and addTask($index) to find target list;

Collectives™ on Stack Overflow

how to add an element to a sub list in angularJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related