javascript - 如何使用 AngularJS 为每个页面从 JSON 文件加载不同部分的数据？

Question

我正在尝试使用 angularJs 创建一个购物网站。我的网站有几个 html 页面，例如 women.html、men.html...

我有 1 个 JSON 文件用于整个网站。我希望每个网站都有不同的产品，我做到了，但它只适用于主页(显示所有产品的页面)。当我单击特定产品时，它没有显示任何内容。

为了更清楚，这是我的代码:

JSON 文件:

 {
  "Men": [
 {
  "name": "Adidas",
  "price": 20,
  "id": "adidas1",
  "image": "pic4.png",
  "description": "abcđsfadfdfsgsg"
},
{
  "name": "Nike",
  "price": 37,
  "id": "nike1",
  "image": "pic2.png",
  "description": "abcđsfadfdfsgsg"
},
{
  "name": "Converse",
  "price": 25,
  "id": "converse1",
  "image": "pic3.png",
  "description": "abcđsfadfdfsgsg"
}
],
"Women": [
 {
   "name": "Adidas2",
  "price": 20,
  "id": "adidas2",
  "image": "pic6.png",
  "description": "abcđsfadfdfsgsg"
 },
 {
  "name": "Nike2",
  "price": 37,
  "id": "nike2",
  "image": "pic7.png",
  "description": "abcđsfadfdfsgsg"
 },
 {
  "name": "Converse2",
  "price": 25,
  "id": "converse2",
  "image": "pic5.png",
  "description": "abcđsfadfdfsgsg"
 }
 ]
 }

男人.html:

 <div ng-repeat="item in items.Men" style="float:left;">
    <div><a href="#/item/{{item.name}}"><img src="/image/{{item.image}}" />
</a>
</div>
    </div>

Women.html:

   <div ng-repeat="item in items.Women" style="float:left;">
    <div>
        <a href="#/item/{{item.name}}"><img src="/image/{{item.image}}" />
</a>
    </div>
</div>

应用程序.js:

app.controller('ItemCtrl',
['$scope', '$routeParams', 'cartService',
    function ($scope, $routeParams, cartService) {
        $scope.item = {};
        angular.forEach($scope.items, function (item) {
            if (item.name == $routeParams.itemName) {
                $scope.item.itemName = item.name;
                $scope.item.itemPrice = item.price;
                $scope.item.itemId = item.id;
                $scope.item.itemImage = item.image;
                $scope.item.itemDescription = item.description;
            }
        });

        $scope.addProduct = function (item) {

            cartService.addToCart(item, $scope.numberOfProducts);

        };

    }
]);

产品详情页:

<div style="float:left; margin:0px 50px 300px 50px;">
<img src="/image/{{item.itemImage}}" style="margin- bottom:50px;margin-
left:200px;">
<p style="margin-right:0px;margin-top:50px;margin-left:50px;">Description:
{{item.itemDescription}}</p>
    </div>

代码真的很长，所以我只展示了我认为使我的代码不起作用的部分。

希望能有所帮助。提前致谢!

Answer 1

如果两个 html 文件都不是 View ，请检查“ItemCtrl” Controller 是否绑定(bind)到 men.html 和 women.html。