如何使用路径以角度js显示数组中的项目

时间:2017-08-01 11:04:16

标签: html angularjs

目前正在处理“待办事项”列表。此应用程序应该添加任务,显示任务,编辑任务,显示详细信息,删除任务和还原已删除的任务。但是它添加了任务并且它用于显示任务但是现在当我添加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: '/'
               });
         }]);

0 个答案:

没有答案