如何将ng-repeat与存储在localStorage中的JSON文件一起使用？

Question

我正在学习如何将JSON文件（本地保存）保存到用户的localStorage中，然后使用Angular检索该信息，并使用hg-repeat将JSON文件中的每个对象（由代表产品的多个对象组成）放入产品盒（其显示为搜索结果）

这是我到目前为止的代码..

AJAX.JS

if(typeof(Storage)!=="undefined") 
{ 
$(document).ready(function() { 
    $('.searchButton').click(function() { 
    $.ajax({ 
     timeout: 3000, 
     url: "data/cars.json", 
     dataType: "text", 
     success: function(products) { 

     alert(products); 

     var dataToStore = JSON.stringify(products); 
     localStorage.setItem('userData', dataToStore); 
     alert(dataToStore); 

     storedData = JSON.parse(localStorage.getItem('userData')); 
     alert(storedData); 

     window.location.href = "results.html"; 


     }, 

    }); 
    }); 
}) 
} 
else { 
alert("Sorry your browser is too old to support this website. Please update."); 
} 

APP.JS

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

app.controller('foxController', ['$scope', function($scope) { 
    $scope.valueFromLocalStorage = storedData; 

}]); 

HTML（搜索结果页面//角部位）

<div class="row section"> 

     <div class="three columns" ng-repeat="v in valueFromLocalStorage"> 
      <div class="panel"> 
       <img class="panelImage" src="images/product6.jpg"></img> 
       <p class="panelTitle">{{v.model}}</p> 
       <p class="panelPrice">{{v.price}}</p> 
      </div> 
      <img class="mFireOne" src="images/fire.png"> 
      <p class="mViewOne">9318</p> 
      <img class="mFireTwo" src="images/heart.png"> 
      <p class="mViewTwo">172</p> 
     </div> 


    </div> 

JSON文件示例

{ 
    "make": "honda", 
    "model": "accord", 
    "year": "1989", 
    "mileage": "25000", 
    "color": "black", 
    "transmission": "automatic", 
    "cylinders": "4", 
    "type": "sedan", 
    "title": "clean", 
    "price": "$15,000", 
    "img_url": "http://img.modifiedcartrader.com/uploaded/XL/2006/12/6584_Honda_Accord_1222200613708PM1.JPG" 
}, 
{ 
    "make": "acura", 
    "model": "integra", 
    "year": "2001", 
    "mileage": "108800", 
    "color": "red", 
    "transmission": "manual", 
    "cylinders": "4", 
    "type": "coupe", 
    "title": "clean", 
    "img_url": "http://carphotos.cardomain.com/ride_images/2/3951/4101/22377050003_large.jpg" 
}, 
{ 
    "make": "ford", 
    "model": "mustang", 
    "year": "2015", 
    "mileage": "1003", 
    "color": "blue", 
    "transmission": "manual", 
    "cylinders": "8", 
    "type": "coupe", 
    "title": "clean", 
    "img_url": "http://s1.cdn.autoevolution.com/images/news/gallery/2015-ford-mustang-rendered-with-slightly-different-face-rear-photo-gallery_6.jpg" 
}, 
{ 
    "make": "volkswagen", 
    "model": "golf", 
    "year": "2002", 
    "mileage": "86000", 
    "color": "green", 
    "transmission": "automatic", 
    "cylinders": "4", 
    "type": "hatchback", 
    "title": "clean", 
    "img_url": "http://zombdrive.com/images/2002_volkswagen_gti_2dr-hatchback_18t_s_oem_1_500.jpg" 
}, 
{ 
    "make": "bmw", 
    "model": "335i", 
    "year": "2010", 
    "mileage": "24664", 
    "color": "red", 
    "transmission": "manual", 
    "cylinders": "6", 
    "type": "sedan", 
    "title": "clean", 
    "img_url": "http://foodcourtlunch.com/wp-content/uploads/2010/03/bmw_335i_30.jpg" 
} 

]

所以到目前为止，我心中已经成功地使用AJAX抢本地帮助JSON文件并将其保存到用户的localStorage。但现在我无法弄清楚如何正确和干净地将其发送到Angular Page（搜索结果），然后使用hg-repeat为JSON文件中的每个产品对象制作产品容器...

Answer 1

你需要从localStorage的得到你的对象。你也可以使用这个库，也可以使用https://github.com/grevory/angular-local-storage。

例如：

```

var app = angular.module('searchFox', ['LocalStorageModule']); 

app.controller('foxController', ['$scope, LocalStorageModule', function($scope, LocalStorageModule) { 
$scope.saved = "gold"; 
$scope.myObj = localStorageService.get('key') 

}]); 

<div class="three columns" ng-repeat="smth in myObj"> 

```

后，你将有你的对象在你看来，可以与你想要的一切事情。

Answer 2

最终你想喂ng-repeat一个数组。根据您的JSON文件的内容，您可能需要拨打 JSON.parse(jsonStr);
或以某种方式将JavaScript中的对象内容传递给数组。

但认为这： <div class="three columns" ng-repeat="??">
想要的东西像
<div class="three columns" ng-repeat="{arrayOfObjects}">
其中一些arrayOfObjects = [ {...}, {...}, {...}];

Answer 3

如果您已经将所有内容都存储在localStorage中，Angular可以直接使用本地JS或angular-local-storage访问这些值。

只需从您的控制器中获取localStorage的值，并将其传递到$scope即可查看。现在

$scope.valueFromLocalStorage = window.localStorage.getItem('productQuery'); 

，您可以使用ng-repeat在valueFromLocalStorage在视图中显示的值。

<div class="row section"> 

    <div class="three columns" ng-repeat="v in valueFromLocalStorage"> 
     <div class="panel"> 
      <img class="panelImage" ng-src="/images/{{v.imageName}}" ></img> 
      <p class="panelTitle">{{v.name}}</p> 
      <p class="panelPrice">{{v.price}}</p> 
     </div> 
     <img class="mFireOne" src="images/fire.png"> 
     <p class="mViewOne">9318</p> 
     <img class="mFireTwo" src="images/heart.png"> 
     <p class="mViewTwo">172</p> 
    </div> 

此外，还有一个校正您的ajax.js文件：

var save = function(obj) { 
     localStorage["productQuery"] = JSON.stringify(obj); //obj instead of productQuery 
};