目前正在处理“待办事项”列表。此应用程序应该添加任务,显示任务,编辑任务,显示详细信息,删除任务和还原已删除的任务。但是它添加了任务并且它用于显示任务但是现在当我添加Route时,它会将项目推送(插入)到数组中,但它不会显示添加的任务。我该如何解决这个问题?
这是它的Html代码:
<!-- Add Tasks -->
<div class = "container col-md-6" style = " margin-left:3%; width:400px;" >
<h2> {{AddTodo}}</h2><hr>
<form class = "form-group" name = "addUserForm">
<div >
<input type = "text" name = "task" class = 'form-control' placeholder = "Add Your Title" ng-model = "tasklist" ng-minlength="1" required><br><br>
<Textarea type = "text" class = "taskdetails" class = 'form-control' placeholder = "Add Your Tasks Details Here..." ng-model = "taskDetails" ng-minlength="1" required ></Textarea>
<br><br><center>
<p><a class = "btn btn-primary" style="width:50%; align:center; margin-left:auto;margin-right:auto; border-radius:0px;" ng-click= "add_task()" ng-disabled='!addUserForm.$valid'>Add Task</a></p>
</center>
</div>
</form>
</div>
<!-- /Add Tasks -->
<!-- Show Tasks -->
<div class = "container col-md-6 col-xs-6" style = " margin-right:3%; width:800px; height:550px;" >
<h2 style= "width:350px;"> {{showTodo}} </h2>
<input type="text" class = "src" ng-model="todo_search.str" placeholder = "Search Tasks" style = "float:right; margin-top:0px; height:35px;"> <hr>
<div ng-controller= "TextController">
<div ng-view></div>
<script type="text/ng-template" id="addStudent.html">
<!-- Show Tasks -->
<div style="width:50%;" class ="col-md-6 col-xs-6" ng-controller="TextController">
<form name = "remUserForm">
<ul class = "task_lists" >
<li ng-repeat = "task in tasks" >
<div class="checkbox" >
<label>
<input type="checkbox" style = "margin-right:50px;margin-top:5px; width:25px; height:25px;" ng-model="task.status" >
{{task.title}}
{{$scope.tasklist}}
{{task.details}}
<strong>
<a ng-click = "edit($index)" >Edit</a>
<a href="#">Detail</a>
</strong>
<!-- <a href="#"></a> -->
</label>
</div>
</li>
</ul>
</form>
<center><button class = "btn btn-primary" style="width:50%; align:center; margin-bottom:2%; border-radius:0px;" ng-click= "remove($index)" >Finish Task</button></center>
</div>
<div style="width:50%; float:right;">
<form name = "remUserForm">
<ul class = "task_lists" >
<li ng-repeat = "tasksbak in tasksbaks | filter: todo_search.str">
<div class="checkbox" >
<label >
<input type="checkbox" value="" style = "margin-right:50px;margin-top:5px; width:25px; height:25px;" ng-model="tasksbak.status" >
<strike>{{tasksbak.title}}</strike>
</label>
</div>
</li>
</ul>
</form>
</div>
<!-- /Show Tasks -->
</script>
</div>
</div>
<!-- /Show Tasks -->
<script type= "text/javascript" src ="js/angular.js"></script>
<script type= "text/javascript" src ="js/angular-route.js"></script>
<script type= "text/javascript" src ="js/custum.js"></script>
这是custum.js
:
var app = angular.module('todolist', ['ngRoute']);
app.controller("TextController",function($scope,$location){
$scope.AddTodo="Add Task";
$scope.showTodo = "ToDo Lists";
$scope.tasklist = '';
$scope.taskDetails= '';
$scope.tasks = [{
title:"1st task",
details:"asdasd",
status:false,
checked:false
}, {
title:"2nd task",
details:"asdasd",
status:false,
checked:false
},
{
title:"3rd task",
details:"asdasd",
status:false,
checked:false
}];
$scope.tasksbaks = [];
$scope.checked = [];
$scope.checkedbak = [];
$scope.add_task = function(path){
$scope.tasks.push({
title:$scope.tasklist,
details:$scope.taskDetails,
status:false,
checked:false
})
console.log($scope.tasks);
$location.path("/addStudent");
$scope.message= $scope.tasklist;
$scope.tasklist = '';
}
$scope.remove = function() {
var len=$scope.tasks.length;
while(len >= 0){
var s = $scope.tasks[len];
if(s && s.status){
// $scope.tasks[i].checked=true;
$scope.tasksbaks.push(s);
$scope.tasks.splice($scope.tasks.indexOf(s),1);
}
len --;
}
};
app.config(['$routeProvider',
function($routeProvider,$locationProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
}).
when('/edit', {
templateUrl: 'edit.html',
controller: 'TextController'
}).
otherwise({
redirectTo: '/'
});
}]);