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

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

我有一个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>

产品详细信息页面：

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

说明：
{{item.itemsdescription}}

代码非常长，所以我只显示了我认为编写代码不起作用的部分

---

希望会有一些帮助。提前谢谢

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

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

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>