angularJSのサブリストに要素を追加する方法は？

私は非常に角張っているので、私に同行してください。私は自分のコードでタスクをリストに追加しようとしています。タスクをフォームからプッシュする特定のリストを見つけられないようです。 addTask関数へのポストフォームはどのようにデバッグできますか？angularJSのサブリストに要素を追加する方法は？

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]

は、リストに要素を追加することでArray.push()

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

出典

2016-05-18 fenec

全デモhere

をapp.js正しいです。あなたは、オブジェクトの配列を$scopeにlistを持っていけない、しかしlistsとして

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

でタスクを追加しようとしたときしかし、エラーが発生します。

サブリストに追加する最初のものは、どのサブリストであるべきかを判断することです。あなたのロジックで

、それにタスクを追加し、最初のtargetListをフェッチにタスクを追加するには、リストかを選択、そう、入力タスク本体の前に<select>を配置する必要があります。

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

出典

2016-05-19 02:00:48

これは本当に素晴らしいです。私が気にしていたことは、各リストに新しいタスク入力を追加するようなものでした。その場合、どのようにターゲットリストを見つけることができます – fenec

デモが更新されました。リスト内の 'ng-repeat ="リストは、$ index "と' addTask（$ index） 'を使ってターゲットリストを検索します。 –

あなたは素晴らしいです!!!! – fenec

angularJSのサブリストに要素を追加する方法は？

答えて

関連する問題