从AngularJSON对象中获取价值

Question

最近我一直在尝试学习AngularJS，并且在Localstorage中碰到了一个碰撞事件，我花了好几个小时试图让它在本地保存，我认为它现在正在工作，但现在我想打印出从JSON数组本地保存的数据，我该怎么办？

编辑：

澄清一点，有什么即时试图实现越来越我在localStorage的拯救出来到网站作为一个字符串的信息，所以它的可读性。希望我更容易理解。在此先感谢

我的看法。

<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

角有包装的窗口，它应该代码内部使用。还有ngStorage模块或许多可用的解决方案，它们以角度方式处理浏览器存储。此外，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; 
}]);