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>
任何提示將不勝感激!