我很有棱角,所以忍受我。我正在尝试将一个任务添加到我的代码中的列表中,似乎没有找到将任务推送到表单的特定列表。 我该如何调试发布到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})
}
}
]);
答案 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>