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

【问题标题】：How to load different part of data from JSON file for each page using AngularJS?如何使用 AngularJS 从 JSON 文件中为每个页面加载不同部分的数据？
【发布时间】：2023-04-03 04:22:01
【问题描述】：

我正在尝试使用 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"
 }
 ]
 }

Men.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>

App.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>

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

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

【问题讨论】：

标签： javascript html angularjs json

【解决方案1】：

如果两个 html 文件都不是视图，请检查 'ItemCtrl' 控制器是否绑定到 men.html 和 women.html。

【讨论】：

【解决方案2】：

制作两个控制器并使用 $http 方法调用每个页面。然后使用范围，引用您想要的数据并在每个页面中呈现

【讨论】：