Question

我是AngularJS的小伙子，但是试图通过它来学习。

我有以下控制器。它根据URL获取JSON文件。

app.controller('PortfolioItemCtrl', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http) {
        $http.get('pages/portfolio/' + $routeParams.itemId + '.json').
            success(function(data) {
                $scope.item = data;
        });
}]);

我似乎无法像我期望的那样阅读这个JSON的问题。

以下是我尝试在HTML中获取此数据的方法：

      <div ng-controller="PortfolioItemCtrl">
        <h1>{{item.cat}}</h1>
        <p>{{item.desc}}</p>
      </div>

我的JSON看起来像这样

{
    "item_1": {
        "id":"1",
        "cat": "Web design",
        "desc": "Online magazine design for <em> \"Calcus\" <\/em> brand",
        "images": [
            "img/portfolio-item-1.jpg",
            "img/portfolio-item-2.jpg"
        ]
    }
}

但它不会呈现任何数据。但是，如果我将{{item}}放在HTML中，我可以看到它获取了JSON文件。

请帮助我理解我做错了什么。我将非常感谢您的解释和一些关于如何专注于学习AngularJS的直接建议。

Answer 1

尝试

   <div ng-controller="PortfolioItemCtrl">
    <h1>{{item.item_1.cat}}</h1>
    <p>{{item.item_1.desc}}</p>
  </div>

Answer 2

看起来你的JSON数据是

{ 
    $scope.item = {
        "item_1": {
            "id":"1",
            "cat": "Web design",
            "desc": "Online magazine design for <em> \"Calcus\" <\/em> brand",
            "images": [
                "img/portfolio-item-1.jpg",
                "img/portfolio-item-2.jpg"
            ]
        }
    }
}

因此，只需使用您的模板

调用{{item.item_1.cat}}而不是{{item.cat}}

AngularJs。正确阅读JSON

2 个答案: