Я очень новичок в угловатых, так что медведь со мной. Я пытаюсь добавить задачу в список в моем коде, и кажется, что он не находит конкретный список, чтобы вытащить задачу из формы. Как я могу отлаживать, что такое публикация формы для функции 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]
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
Демо обновлено. Обратите внимание: 'ng-repeat =" список в списке отслеживает $ index "и' addTask ($ index) 'для поиска целевого списка; –
ты потрясающий !!!! – fenec