Question

请帮助从文件fruits.json

中提取数据

HTML：

    <body ng-app="fruitsApp">
        <div ng-controller="fruitsController">
            <ul>
                <li ng-repeat="fruit in fruits">{{fruit.name}}</li>
            </ul>
        </div>
    </body>

JS：

var fruitsApp = angular.module('fruitsApp', [])

fruitsApp.factory('fruitsFactory', function($http) {
  return {
          $http.get('fruits.json').success(callback);
      }
  };
});

fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
  fruitsFactory.getFruitsAsync(function(results) {
      $scope.fruits = results.fruits;
  });
});

fruits.json：

[
    {
        "id": 1, 
        "name": "qwerty", 
        "date": "12.11.2012", 
        "teaser": "1Вас научат пользоваться им, дадут советы по эксплуатации и покажут возможности того, что Вы приобрели.", 
        "body": "Вас научат пользоваться им, дадут советы по эксплуатации и покажут возможносто"
    }]

虱子演示： http://prozaik.16mb.com/angular/remote_data_2/

Answer 1

工厂申报中有1个错误。没有方法getFruitsAsync（您尝试在控制器中使用）。在return {}中声明它作为property = function。

2个错误：您没有回复字段'fruit'，您的回复是数组，因此$scope.fruits = results.fruits;应为$scope.fruits = results;

Answer 2

您的代码应该是这样的（未经测试）：

var fruitsApp = angular.module('fruitsApp', [])

fruitsApp.factory('fruitsFactory', function($http) {
  return {
          getFruitsAsync: function(callback) {
              $http.get('fruits.json').success(callback);
          }
      }
  };
});

fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
  fruitsFactory.getFruitsAsync(function(results) {
      $scope.fruits = results;
  });
});

从文件中提取数据

2 个答案: