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"
 }
 ]
 }

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>

代码很长，所以我只展示了我认为使我的代码无效的部分。

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

Answer 1

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

Answer 2

创建两个控制器并使用$ http方法调用每个页面。然后使用范围，引用所需的数据并在每个页面中呈现

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

2 个答案: