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页面（搜索结果），然后使用hg-repeat为JSON文件中的每个产品对象创建一个产品容器......

Answer 1

最终你想要输入ng-repeat一个数组。您可能需要调用JSON文件的内容，具体取决于您的JSON文件内容 JSON.parse(jsonStr);
或者以某种方式将JavaScript中对象的内容传递给数组。

但想想这个： <div class="three columns" ng-repeat="??">
想要这样的东西 <div class="three columns" ng-repeat="{arrayOfObjects}">
哪些是arrayOfObjects = [ {...}, {...}, {...}];

Answer 2

您需要从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 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
};

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

3 个答案: