javascript - Angular Js - 本地存储

Question

我是 Angular 的新手，我有一个简单的问题要传递给 AngularJS 中的 LocalStorage。我有一个 json 文件来将数据获取到 DOM，我已经让 LocalStorage.getItem 工作并显示在控制台上。

现在我需要弄清楚如何在单击一个简单按钮后将 LocalStorage 放入 Dom。

这是我的文件 Controller :

angular.module('stock').controller('checkListController', [
    '$http',
    'checkListService',
    function checkListController($http, checkListService) {
        'use strict';

        var self = this;

        this.checkList = [];
        $http.get('api/checklist.json').then(function (result) {
            self.checkList = result.data.items;
        });

        this.checkListMissing = [];
        $http.get('api/checklist-missing.json').then(function (result) {
            self.checkListMissing = result.data.items;
        });


        var addList = [];
        var missingItemList = [];
        this.addItem = function (item) {
            addList.push(item);
            localStorage.setItem('item', JSON.stringify(addList));
            missingItemList = addList;
            console.log(missingItemList);
        }

    }
]);

这有什么意义吗？谢谢大家

Answer 1

    angular.module('stock').controller('checkListController', [ '$http','$window', 'checkListService', function checkListController($http,$window, checkListService) { 'use strict';

        var self = this;

        this.checkList = [];
        $http.get('api/checklist.json').then(function (result) {
            self.checkList = result.data.items;
        });

        this.checkListMissing = [];
        $http.get('api/checklist-missing.json').then(function (result) {
            self.checkListMissing = result.data.items;
        });


        var addList = [];
        var missingItemList = [];
        this.addItem = function (item) {
            addList.push(item);
            localStorage.setItem('item', JSON.stringify(addList));
            missingItemList = addList;
            console.log(missingItemList);
        }
    //this function will call when a button will click
        $scope.showJsonContent = function() {
                         $scope.jsonDataFrmLclStorage = JSON.parse($window.localStorage.getItem("item"));
                     }

    }
    ])

HTML need for button which will call the showJsonContent function expose in scope would be below
<button data-ng-click="showJsonContent()" >Show Content</button>

这将显示 json 数据的整个对象{{jsonDataFrmLclStorage}}