Как добавить элемент в подсписок в angularJS?

Question

Как добавить элемент в подсписок в angularJS?

0

Я очень новичок в том, что так угрюм, что медведь со мной. Я пытаюсь добавить задачу в список в моем коде, и кажется, что он не находит конкретный список, чтобы вытащить задачу из формы. как я могу отлаживать, что такое публикация формы для функции 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})
     }
   }
 ]);

fenec 19 май 2016, в 01:00

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Yin Gang · Accepted Answer · 2016-05-18T23-46-00.000Z

Полная демонстрация here

По Array.push() добавить элемент в список правильно. Но ошибка возникает, когда вы пытались добавить задачу

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

Поскольку у вас нет list в области $scope, но есть lists, массив объектов.

Добавить в дополнительный список, первое, что нужно сделать, чтобы выяснить, какой из подписок должен быть.

По вашей логике нужно выбрать, к какому списку добавить задачу, а затем поместить объект <select> before input task, сначала 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>

это действительно круто то, что я имел в виду, было больше похоже на добавление нового ввода задачи в каждый список. в таком случае, как я могу найти целевой список
Демо обновлено. Обратите внимание, ng-repeat="list in lists track by $index" и addTask($index) чтобы найти целевой список;