javascript - 为 AngularJS Web App 导入 JSON 数据

Question

我一直在关注 Angular 教程，我试图让我的 JSON 数据出现，但我知道我做错了什么，但无法找出正确的方法。

我知道在我的 app.js 的某个地方我的作用域搞砸了。

如何显示每个产品的Family Name？

这是我的布局:

应用程序.js

var eloApp = angular.module('eloMicrosite', []);

eloApp.controller('homeListController', ['$scope', '$http',
    function($scope, $http) {
        $http.get('/Elo/eloMS.min.json')
            .success(function(data) {
                $scope.products = data;
            });
}]);

eloApp.controller('HomeController', function(){
    this.products = $scope.products;
});

HTML

<div ng-controller="HomeController as home">
        {{home.products[o]["Family Name"]}}
</div>

JSON 布局

{
  "products": [
    {
      "Family Name": "3201L",
      "Type": "IDS",
      "Size (inches)": 32,
      "Aspect Ratio": "16:9",
      "Part Number": "E415988",
      "Product Description": "ET3201L-8UWA-0-MT-GY-G",
      "Marketing Description": "3201L 32-inch wide LCD  Monitor",
      "Advance Unit Replacement": "",
      "Elo Elite": "",
      "Package Quantity": 1,
      "Minimum Order Quantity": 1,
      "List Price": 1800
    },
    .
    .
    .
  ],
  "families": [
     {
       category: "Category1"
     },
     {
       category: "Category2"
     }
  ],
  "accessories": [
     {
       category: "Category1"
     },
     {
       category: "Category2"
     }
  ]
}

Answer 1

你应该在你的页面上添加homeListController而不是HomeController，还需要使用this而不是$scope 因为你想遵循 controllerAs 语法，第二个 Controller 在这种情况下没用，你可以从 app.js 中删除它。

标记

<div ng-controller="homeListController as home">
        {{home.products[0]["Family Name"]}}
</div>

Controller

eloApp.controller('homeListController', ['$http',
    function($http) {
        var home = this;
        $http.get('/Elo/eloMS.min.json')
            .success(function(data) {
                home.products = data.products; //products should mapped here
            });
}]);

Demo Plunkr