從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; 
}]);