在 Angular 控制器中迭代 JSON

Question

这项服务

angular.module('categoryService', ['ngResource']).
factory('Category', function($resource) {
    return $resource('data/categories.json');
});

读取这个文件：

[{"id":1,"name":"Close Reading","created_at":"2013-09-11T00:19:00.906Z","updated_at":"2013-09-21T13:21:05.123Z","subtitle":"Deliberate, careful reading will improve students’ grasp of every text."},{"id":2,"name":"Choosing Complex Texts","created_at":"2013-09-11T00:20:26.072Z","updated_at":"2013-09-21T13:21:07.698Z","subtitle":"What should your students be reading?"},{"id":3,"name":"Writing \u0026 Language","created_at":"2013-09-11T00:20:31.219Z","updated_at":"2013-09-21T13:21:08.008Z","subtitle":"What are the foundations of good written communication?"},{"id":4,"name":"Vocabulary","created_at":"2013-09-11T00:20:52.209Z","updated_at":"2013-09-21T13:21:08.824Z","subtitle":"Discover ways to expand students’ vocabulary."},{"id":5,"name":"Speaking \u0026 Listening","created_at":"2013-09-11T00:20:59.205Z","updated_at":"2013-09-21T13:21:09.744Z","subtitle":"Improve communication skills in your classroom."},{"id":6,"name":"Media Literacy \u0026 Technology","created_at":"2013-09-11T00:21:04.671Z","updated_at":"2013-09-21T13:21:10.042Z","subtitle":"Explore and apply the latest trends in digital media."},{"id":7,"name":"Differentiation","created_at":"2013-09-11T00:21:09.644Z","updated_at":"2013-09-21T13:21:10.363Z","subtitle":"Different students have different needs."},{"id":8,"name":"Reading Support","created_at":"2013-09-11T00:21:18.683Z","updated_at":"2013-09-21T13:21:10.820Z","subtitle":"Enrich your students’ reading experience."},{"id":9,"name":"Engagement \u0026 Motivation","created_at":"2013-09-11T00:21:35.022Z","updated_at":"2013-09-21T13:21:11.766Z","subtitle":"What makes students thirsty for learning?"},{"id":10,"name":"Performance Task Assessment","created_at":"2013-09-11T00:21:39.589Z","updated_at":"2013-09-21T13:21:12.107Z","subtitle":"Prepare students for the next generation of assessment."}]

如果我使用

，它会按预期工作

<li ng-repeat="category in categories" class="category-nav">

但我似乎无法访问控制器内的单个类别。我尝试了以下方法：

function CategoryCtrl($scope, Category, $stateParams, _) {
  $scope.categories = [];
  $scope.categories = Category.query();
  /*
  $scope.category = _.where($scope.categories, {id: $stateParams.category_id};
  or      
  $scope.categories[$stateParams.category_id];
  or
  calling eval(), JSON.parse or angular.fromJson on $scope.categories
  */
}

我似乎无法找到看起来像一组对象的对象。如何在控制器中访问 $scope.categories[i] 或类似内容？

Answer 1

使用回调函数，当你触发查询方法时，它是异步的，所以当你得到响应时必须这样做：

function CategoryCtrl($scope, Category, $stateParams, _) {
    $scope.categories = [];
    $scope.categories = Category.query(function (categories) {
        console.log(categories); //here you should see the data
        $scope.category = _.where(categories, {id: $stateParams.category_id};
    });
    console.log($scope.categories); //here you probably won't get the data
}

Answer 2

试试这个

 angular.module('categoryService', ['ngResource'])
     .factory('Category', function($resource) {
            var temp = $resource('category.json', {},
                      {
                        get: {method:'GET', isArray:true},
                      });
                   return temp;                     
                });

控制器：

   function CategoryCtrl($scope, Category) {
       $scope.categories = [];
       Category.get({}, function(response) {
            $scope.categories =  response;
             console.log($scope.categories[0]);
        });
    }

DEMO