Question

我在angularJS中创建一个ToDo列表来测试本地存储。

在我的mainController中，我有它：

$scope.saved = localStorage.getItem('todos');
$scope.todos = (localStorage.getItem('todos')!==null) ? JSON.parse($scope.saved) : [  ];
localStorage.setItem('todos', JSON.stringify($scope.todos))

var oldTodos;

$scope.addLocalStorage = function() {
    $scope.todos.push({
        text: $scope.todoText,
        content: $scope.todoContent,
        done: false
    });

    $scope.todoText = ''; //clear the input after adding
    $scope.todoContent = ''; //clear the input after adding
    localStorage.setItem('todos', JSON.stringify($scope.todos));

    console.log('Adicionado ao local storage com sucesso!');
    window.location = '#/list';
};

$scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo){
        count+= todo.done ? 0 : 1;
    });
    return count;
};

$scope.removeLocalStorage = function() {
    oldTodos = $scope.todos;
    $scope.todos = [];

    angular.forEach(oldTodos, function(todo){
        if (!todo.done)
            $scope.todos.push(todo);
        console.log('Removido do local storage com sucesso!');
    });

    localStorage.setItem('todos', JSON.stringify($scope.todos));
};

$scope.getDataLocalStorage = function() {
    var obj = document.getElementsByTagName('p')[1].innerHTML;
    console.log('obj: ' + obj);

    window.location = '#/editcard';
}

在我的edit-card.html文件中，我有它：

<div ng-controller="MainController">
    <form>
        <div class="input-field col s12">
            <input id="edit_title" type="text" ng-model="todoText" class="validate done-{{ todo.done }}">
            <label for="edit_title">Title</label>
        </div>

        <div class="input-field col s12">
          <textarea id="edit_content" type="text" ng-model="todoContent" class="materialize-textarea" ng-model="todo.done">{{ todo.content }}</textarea>
          <label for="edit_content">Content</label>
        </div>

        <div class="col s12">
            <div class="right">
                <button class="waves-effect light-green darken-4 btn" type="submit" value="submit" href="/#/list"> Salvar Offline </button>
                <button class="waves-effect light-green darken-4 btn" type="submit" value="submit" href="/#/list"> Enviar </button>
            </div>
        </div>
    </form>
</div>

在我的list.html中有一个：

<div ng-controller="MainController">
    <div id="items_on_card" class="card grey lighten-4" ng-repeat="todo in todos track by $index">
        <input type="checkbox" class="filled-in" ng-model="todo.done" id="item-{{todo}}">
        <label for="item-{{todo}}" class="done-{{ todo.done }}">{{ todo.text }}</label>
        <i ng-click="getDataLocalStorage()">
            <p id="item-description" ng-model="todo.done">{{ todo.content }}</p>
        </i>
    </div>

    <div align="right">
        <span>{{ remaining() }} de {{ todos.length }} restante</span><br><br>
        <a class="waves-effect waves-light light-green darken-4 btn" type="button" href="/#/addnew">Novo</a>
        <a class="waves-effect waves-light red darken-2 btn" type="button" ng-click="removeLocalStorage()">Excluir</a>
    </div>
</div>

我的功能getDataLocalStorage不起作用

我有一个错误：

TypeError: Cannot read property 'innerHTML' of undefined at ChildScope.$scope.getDataLocalStorage

我需要做的是，在ToDo中添加新项目之后我可以稍后编辑它并使用新数据进行更新，但我想在输入标记和textarea标记中显示要编辑的当前数据。

有谁知道这样做？

Answer 1

var obj = document.getElementsByTagName（＆＃39; p＆＃39;）[1] .innerHTML;
您正在引用p元素列表，但文档中没有p元素。

使用angularJS填充输入和textarea

1 个答案: