AngularJS ToDO列表編輯錯誤

我在創建的簡單的Angular Todo應用程序的編輯部分存在問題。我的應用程序添加，刪除和編輯條目。我已經使用了AngularJS和BootStrap。當我按下編輯按鈕時，所有條目都進入編輯模式，而不是我想要編輯的條目。我不知道爲什麼就地編輯沒有按預期工作。AngularJS ToDO列表編輯錯誤

我的HTML：

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    <script src="../bower_components/angular/angular.min.js"></script> 
    <script src="todo.js"></script> 
</head> 
<body ng-controller="myCtrl"> 

<div class="container"> 
    <h1>My TODO List</h1> 
    <table class="table"> 
     <thead> 
     <tr> 
      <td><input class="form-control" ng-model="todo"></td> 
      <td><button class="btn btn-primary" ng-click="addItem()">Add</button></td> 
     </tr> 
     <tr> 
      <th>Serial No</th> 
      <th>Tasks to be Completed</th> 
      <th>Action</th> 
      <th>&nbsp</th> 
     </tr> 
     </thead> 
     <tbody> 

     <tr ng-repeat="todo in todolist"> 
      <td >{{$index+1}}</td> 
      <td ng-hide="todo.selected == true">{{todo.task}}</td> 
      <td><input class="form-control" ng-show="todo.selected == true" ng-model="todo.task"> 
       <button class="btn btn-success" ng-show="todo.selected == true" ng-click="save($index)">Save</button> 
       <button class="btn btn-danger" ng-show="todo.selected == true" ng-click="cancel($index)">Cancel</button> 
       <button class="btn btn-warning" ng-click="edit($index)" ng-hide="todo.selected == true">Edit</button> 
       <button class="btn btn-danger" ng-click="deleteItem($index)" ng-hide="todo.selected == true">Delete</button> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

</body> 
</html>

我的JavaScript代碼：

angular.module("myApp",[]) 
    .controller("myCtrl", function($scope){ 
     $scope.todolist = []; 

     $scope.addItem = function(){ 
      console.log($scope.todo); 
      if($scope.todo === undefined){ 
       return false ; 
      } 
      else{ 

       $scope.todoObj = {}; 
       $scope.todoObj["task"] = $scope.todo; 
       $scope.todoObj["selected"] = false; 
       $scope.todolist.push($scope.todoObj); 
       $scope.todo = ""; 
       console.log($scope.todolist); 
      } 

     } 

     $scope.deleteItem = function($index){ 
      var index =$index; 
      $scope.todolist.splice(index,1); 
     } 


     $scope.edit = function($index){ 
      for(var i=0; i< $scope.todolist.length; i++) 
       if($index == i){ 

        $scope.todolist[i].selected = true; 
       } 
     } 


     $scope.save = function($index){ 
      console.log("saving contact"); 
      console.log($scope.todolist.length) 
      for(var i=0; i< $scope.todolist.length; i++){ 
       if($index == i){ 
        console.log($scope.todolist[$index]); 

        $scope.todolist[i] = `enter code here`angular.copy($scope.todolist[$index]); 
        // $scope.todolist[i] = $scope.todolist[$index]; 
        $scope.todolist[i].selected = false; 
        console.log("todo after save",$scope.todolist); 
       } 
      } 

     } 


     $scope.cancel = function($index) { 
        for(var i=0; i< $scope.todolist.length; i++){ 
        if ($scope.todolist[$index].selected !== false) { 
         $scope.todolist[$index].selected = `enter code here`$scope.todolist[i]; 
         $scope.todolist[$index].selected = false; 
       } 
      } 

     }; 
    })

來源

2015-10-29 javascript novice

當你設置此

$scope.editing = $scope.todolist.indexOf(item);

您所有的NG-重複都是靠這個隱藏/展示自己。

ng-show="editing"

來源

2015-10-29 17:45:39 Seano666

那麼如何確保ng-show只發生需要編輯的項目呢？ –

這有點複雜。我會做的是有一個「可編輯的」布爾數組，並讓你的重複元素的ID爲0,1,2等。然後你用你的ID調用編輯，它爲該ID設置特定的「可編輯」布爾值真正。您還需要一個函數循環並將所有可編輯對象重置爲false。 – Seano666

謝謝！我明白了。現在我有另一個問題。一旦我編輯，我有兩個按鈕。取消並保存。保存工作正常。但是當我取消時，如果我做了任何更改，所做的更改都可見:( –

AngularJS ToDO列表編輯錯誤

回答

相關問題