Question

我试图将使用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>

任何提示都将受到高度赞赏！

Answer 1

尝试将$index代替index：

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

使用AngularJS从LocalStorage中删除项目

1 个答案: