Question

我最近一直在努力学习AngularJS，并且在使用Localstorage的路上遇到了一个障碍我花了这么多时间试图让它在本地保存，我认为它现在应该工作，但现在我想打印出从JSON数组中保存的本地数据，我该怎么做呢？

编辑：

有点澄清，我想要实现的是将我在本地存储中保存的信息作为字符串输出到网站上，因此它是可读的。希望我更容易理解。提前致谢

我的观点。

<ion-list>
  <div >
        <ion-item ng-controller='ModalEditCtrl' ng-click="openModal()">
              <div class="thumbnail" style="border:1px black solid">
          </div>
          <div  ng-controller="createPerson"  class="contactinfo" >
            <li ng-repeat="contact in contactdetail.contactinfo">  {{contact.name}} </li>
          </div>

        </ion-item>

  </div>

  <div ng-controller="ModalAddCtrl">
    <button type="button" ng-click="openModal()">+++</button>
  </div>

</ion-list>

我的控制器

app.controller('createPerson', function ($scope) {
  var id = id_counter = 1;
  $scope.editorEnabled = false;
      $scope.disableEditor = function() {
        $scope.editorEnabled = false;
      };
      $scope.enableEditor = function() {
        $scope.editorEnabled = true;
      };
  $scope.contactinfo = [
    {name: 'test', phone: 1231, email: 'asd@asd.com'}
  ];
  $scope.saveData = function () {
    id_counter += 1;
    $scope.editorEnabled = false;
    $scope.contactinfo.push({
      name: $scope.contactName,
      phone: $scope.contactPhone,
      email: $scope.contactEmail,
      sort_id: id_counter
    });
    //$scope.todoText = ''; //clear the input after adding
    localStorage.setItem('contactinfo', JSON.stringify($scope.contactinfo));
  //  localStorage.setItem("contacts", JSON.stringify(contacts));

  }
  $scope.loadData = function () {
    var contacts = localStorage.getItem("contactinfo");
    var contactdetail = JSON.parse(contacts); //
    console.log(contactdetail);

  }
  $scope.clearData = function () {
    window.localStorage.clear();

  }
});

Answer 1

Angular有窗口包装器，应该在你的代码中使用。还有ngStorage模块或许多可用的解决方案，它们以Angular方式处理浏览器存储。此外，Angular具有angular.toJson()和angular.fromJson()等功能。如果是jsonObj是JSON数组，然后var obj = angular.fromJson(jsonObj)为您提供JavaScript数组。如果jsonObj内有array属性，那么您应该使用：var jsArray = angular.fromJson(jsonObj).array。

Answer 2

你的问题不是很明确，我不认为除非你把它清理干净，否则你将得到很多帮助。

要打印出数据（通常用于调试），您只需在html中的某处添加{{contactinfo|json}}即可。

要实际显示要在网页上使用的数据，以下内容应该适合您。

<div ng-repeat="contact in contactinfo track by $index">
    <div>Name: {{contact.name}}</div>
    <div>Phone: {{contact.phone}}</div>
    <div>Email: {{contact.email}}</div>
</div>

我认为有些逻辑可能会更好地分成工厂。这样的事可能......？

var contactFactory = angular.module('contactFactory', []);

contactFactory.factory('contactInfo', ['$window', function ($window) {
    var id = id_counter = 1;
    var contacts = [];

    function addContact(name, phone, email) {
        id_counter += 1;
        contacts.push({
          name: name,
          phone: phone,
          email: email,
          sort_id: id_counter
        });
        saveData();
    }

    function saveData(contactInfo) {
        $window.localStorage.setItem('contactinfo', angular.fromJson(contacts));
    }

    function loadData() {
        contacts = angular.toJson($window.localStorage.getItem('contactinfo'));
        return contacts;
    }

    function clearData() {
        $window.localStorage.removeItem('contactinfo');
    }

    return {
        addContact: addContact,
        saveData: saveData,
        loadData: loadData,
        clearData: clearData
    };
}]);

var app = angular.module('yourAppName', ['contactFactory']);

app.controller('createPerson', ['$scope', 'contactInfo', function ($scope, contactInfo) {
  $scope.editorEnabled = false;
      $scope.disableEditor = function() {
        $scope.editorEnabled = false;
      };
      $scope.enableEditor = function() {
        $scope.editorEnabled = true;
      };

  $scope.contactinfo = [
    {name: 'test', phone: 1231, email: 'asd@asd.com'}
  ];

  $scope.saveData = function () {
    contactInfo.addContact($scope.contactName, $scope.contactPhone, $scope.contactEmail);
    $scope.editorEnabled = false;
  }
  $scope.loadData = contactInfo.loadData;
  $scope.clearData = contactInfo.clearData;
}]);

使用Angular从JSON对象获取值

2 个答案: