Я пытался изучить 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: '[email protected]'}
];
$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();
}
});
Угловая имеет оболочку для окна, которая должна использоваться внутри вашего кода. Существует также модуль ngStorage или множество доступных решений, которые имеют дело с хранилищем браузеров по Угловому пути. Кроме того, Угловая функция имеет такие функции, как angular.toJson()
и angular.fromJson()
. Если, например, jsonObj
является массивом JSON, тогда var obj = angular.fromJson(jsonObj)
дает вам массив JavaScript. Если jsonObj
имеет свойство array
внутри, вы должны пойти с: var jsArray = angular.fromJson(jsonObj).array
.
Ваш вопрос не очень ясен, я не думаю, что вы сможете получить большую помощь, если не почистите его немного.
Чтобы распечатать данные (обычно для отладки), вы можете просто добавить {{contactinfo|json}}
в свой html.
Чтобы фактически отображать данные для использования на веб-странице, для вас должно работать следующее.
<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: '[email protected]'}
];
$scope.saveData = function () {
contactInfo.addContact($scope.contactName, $scope.contactPhone, $scope.contactEmail);
$scope.editorEnabled = false;
}
$scope.loadData = contactInfo.loadData;
$scope.clearData = contactInfo.clearData;
}]);
$scope.loadData
вы загружаете переменную, которая больше нигде не используется. Вы должны поместить это в область где-нибудь. Самый простой способ - заменить файл console.log на $scope.contactinfo = contactdetail