如何将一个元素添加到angularJS中的子列表中?

时间:2016-05-18 22:56:20

标签: angularjs

我很有棱角,所以忍受我。我正在尝试将一个任务添加到我的代码中的列表中,似乎没有找到将任务推送到表单的特定列表。 我该如何调试发布到addTask函数的表单?

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

1 个答案:

答案 0 :(得分:1)

完整演示 here

通过Array.push()将元素添加到列表中是正确的。但是,当您尝试通过

添加任务时会发生错误
$scope.list.tasks.push({name: $scope.body, completed: false});

由于list上没有$scope,而lists是一个对象数组。

添加到子列表,首先要弄清楚应该是哪个子列表。

  

根据您的逻辑,需要选择要添加任务的列表,因此,在输入任务体之前放置<select>,先获取targetList,然后将任务添加到其中。

// 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>