Импорт данных JSON для AngularJS Web App

Question

Я следовал инструкциям по Angular и пытаюсь отобразить данные JSON, но я знаю, что делаю что-то не так, но не могу найти правильный метод.

Я знаю, что где-то в моем app.js моя сфера перепутана.

Как я могу отобразить Family Name каждого продукта?

Вот макет у меня есть:

app.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 Layout

{
  "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 Синтаксис, второй контроллер бесполезен в этом сценарии, вы можете удалить это из app.js,

наценка

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

контроллер

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
            });
}]);

Демо Планкр