Question

我正在尝试使用AngularJS从json文件中提取数据并将该数据插入表格行。

＆＃13;

var Products = angular.module('Products', []);
Products.controller('ProductsController', function($scope, $http) {
  $http.get("/Products.json")
    .success(function(productsdata) {
      $scope.Products = productsdata.DATA;
      console.log($scope.Products);
    })
    .error(function(error) {
      $scope.error = error;
      console.log($scope.Products);
    });
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="Products" ng-controller="ProductsController">
  <div>
    <table class="table" ng-hide="{{error}}">
      <tr>
        <th>id:</th>
        <th>name:</th>
        <th>description:</th>
        <th>category:</th>
        <th>price:</th>
        <th>image:</th>
      </tr>
      <tr ng-repeat="x in Products">
        <td>{{Products.IDPRODUCTS[$index]}}</td>
        <td>{{Products.NAME[$index]}}</td>
        <td>{{Products.DESCRIPTION[$index]}}</td>
        <td>{{Products.CATEGORY[$index]}}</td>
        <td>{{Products.PRICE[$index] | currency}}</td>
        <td>{{Products.IMG[$index]}}</td>
      </tr>
    </table>
    <div ng-show="{{error}}">
      There was an error
    </div>
  </div>
</body>

</html>

＆＃13;

我目前没有从我的Chrome调试中收到任何错误，并且我编写到脚本中的错误函数没有触发。

.error(function (error) {
$scope.error = error;
console.log($scope.Products);});

请帮助解决为什么它不按预期工作会很好。

这是我的小项目。

http://embed.plnkr.co/W2ALqBu16czJBlzfCfXj/preview

AngularJS无法从Json文件中提取数据

0 个答案: