为 AngularJS 网络应用程序导入 JSON 数据

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

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

Demo Plunkr

为 AngularJS 网络应用程序导入 JSON 数据

Import JSON data for AngularJS Web App

javascript

angularjs

angularjs-scope

angularjs-controller

angularjs-controlleras

app.js

HTML

JSON布局