2014-10-12 140 views
0

我正在嘗試將使用AngularJS和LocalStorage構建的許多待辦事項列表示例中的一個改爲我的一個小應用程序。使用AngularJS從LocalStorage中刪除項目

到目前爲止,我可以創建項目並將其保存到LocalStorage中,並從視圖和LocalStorage中刪除項目。我現在發現的問題是,當我刪除項目時,刪除功能不會刪除我選擇的項目,而是刪除列表中的第一項。

例如,如果我有一個1-2-3-4的數組,我選擇刪除3,它總是會刪除1,然後是2,依此類推。

這裏是我的代碼,是一個初學者,因爲我,我敢肯定,我錯過了什麼......

angular.module('Logger', []) 
    .controller('TodoCtrl',['$scope', function($scope){ 

    $scope.todos = extractJSONFromLocalStorage(); 


    $scope.addTodo = function() { 
     $scope.todos.push({ text: $scope.formTodoText}); 

     jsonToLocalStorage($scope.todos); 
     $scope.formTodoText = ''; 
    }; 


    $scope.kill = function (index) { 

     $scope.todos.splice(index, 1); 
     localStorage.removeItem(index); 

     jsonToLocalStorage($scope.todos); 

    }; 

    function extractJSONFromLocalStorage() { 
     return JSON.parse(localStorage.getItem("todo")) || [ 
      {text: 'learn angular', done: false}, 
      {text: 'eat food', done: false}, 
      {text: 'Click to remove', done: true} 
     ]; 
    } 


    function jsonToLocalStorage(todos) { 
     var jsonTodo = angular.toJson(todos); 

     if (jsonTodo != 'null') { 
      localStorage.setItem("todo", jsonTodo); 
     } else { 
      alert("Invalid JSON!"); 
     } 
    } 
}]); 

和HTML:

  <h1><span class="modal-title">Edit drivers</span></h1> 
      <li ng-repeat="todo in todos"> 

      <span class="done-true">{{todo.text}}</span> 
      <label class="delete pull-right" for='{{todo.text}}' ng-click="kill(index)"> 
       <div><i class="fa fa-close"></i></div> 
      </label> 

      </li> 

      <h2>Add new driver<h2> 
      <form action="" class="form-horizontal controller" ng-submit="addTodo()"> 
      <input class="form-control" type="text" placeholder="Enter driver name" ng-model="formTodoText" ng-model-instant> 
      <button class="btn btn-success form-control">Add</button> 
      </form> 

任何提示將不勝感激!

回答

3

嘗試把$index而不是index

<label class="delete pull-right" for='{{todo.text}}' ng-click="kill($index)">