ng-repeat 和对象/数组结构

Question

我对 ng-repeat 如何从数组/对象中提取数据有疑问。我最初有这个设置：

工厂

   .factory('newsService', function($q) {

         var schoolnews = [
            {'ID': '1', 'image': 'image1.jpg', 'title': 'Title ...', 'itemtext': 'Full story text ...'},
            {'ID': '2', 'image': 'image2.jpg', 'title': 'Title ...', 'itemtext': 'Full story text ...'},
            {'ID': '3', 'image': 'image3.jpg', 'title': 'Title ...', 'itemtext': 'Full story text ...'}
          ];

        return {
            findAll: function() {
                var deferred = $q.defer();
                deferred.resolve(schoolnews);
                return deferred.promise;
            },

            findById: function(newsId) {
                var deferred = $q.defer();
                var newsItem = schoolnews[newsId - 1];
                deferred.resolve(newsItem);
                return deferred.promise;
            }
        }   

    });

控制器

schoolApp.controller('newsCtrl', function($scope, newsService) {
    newsService.findAll().then(function (schoolnews) {
            $scope.schoolnews = schoolnews;
        });

})



schoolApp.controller('newsDetailCtrl', function($scope,  $stateParams, newsService) {
      newsService.findById($stateParams.ID).then(function(newsDetail) {
            $scope.newsDetail = newsDetail;
  })
})

HTML

  <ion-item class="item-text-wrap item-thumbnail-left" href="#tab/newsdetail/{{headline.ID}}" ng-repeat="headline in schoolnews">
    <img ng-src="http://http://multimedia.dev/pics/{{headline.image}}" spinner-on-load>
    <p>{{headline.title}}</p>
  </ion-item>

和

   <div ng-bind-html="newsDetail.itemtext"></div>

这一切都按预期进行，据我所知。然后我修改了我的应用程序，以便它可以从远程服务器获取数据并将 JSON 字符串存储在本地存储中。我还将我的数据结构修改为一个对象，而不是以 ID 为键的数组，如下所示。

工厂

   .factory('newsService', function($q) {

        var newsHeadlines =localStorage.getItem('newsHeadlines') || '{"status":"READFAIL"}'; // get news as a JSON string. if newsHeadlines not found return a JSON string with fail status
        var newsHeadlinesObj = JSON.parse(newsHeadlines);// convert to an object 
        // structure of newsHeadlinesObj
        // {
        //  "56" :  {"ID" : "56", "title" : "Title ...", "image" : "image1.JPG", "itemtext" : "Full story ..."},
        //  "266" : {"ID" : "266", "title" : "Title ...", "image" : "image2.JPG", "itemtext" : "Full story ..."},
        //  "272" : {"ID" : "272", "title" : "Title ...", "image" : "image3.JPG", "itemtext" : "Full story ..."}
        // }

        return {
            findAll: function() {
                var deferred = $q.defer();
                deferred.resolve(newsHeadlinesObj);
                return deferred.promise;
            },

            findById: function(newsId) {
                var deferred = $q.defer();
                var newsItem = newsHeadlinesObj[newsId];
                deferred.resolve(newsItem);
                return deferred.promise;
            }
         }   
    });

控制器

schoolApp.controller('newsCtrl', function($scope, newsService) {
    newsService.findAll().then(function (newsHeadlinesObj) {
            $scope.newsHeadlinesObj = newsHeadlinesObj;
        });

})


schoolApp.controller('newsDetailCtrl', function($scope,  $stateParams, newsService) {
      newsService.findById($stateParams.ID).then(function(newsDetail) {
            $scope.newsDetail = newsDetail;
  })
})

HTML

  <ion-item class="item-text-wrap item-thumbnail-left" href="#tab/newsdetail/{{headline.ID}}" ng-repeat="headline in newsHeadlinesObj"> 
    <img ng-src="http://multimedia.dev/pics/{{headline.image}}">
    <p>{{headline.title}} / {{headline.ID}}</p>
  </ion-item>

和

<div ng-bind-html="newsDetail.itemtext"></div>

我的问题！

我的新设置有效，但我不明白它是如何工作的。鉴于我的新数据是：

{
            "56" :  {"ID" : "56", "title" : "Title ...", "image" : "image1.JPG", "itemtext" : "Full story ..."},
            "266" : {"ID" : "266", "title" : "Title ...", "image" : "image2.JPG", "itemtext" : "Full story ..."},
            "272" : {"ID" : "272", "title" : "Title ...", "image" : "image3.JPG", "itemtext" : "Full story ..."}
     }

我期待

ng-repeat="headline in newsHeadlinesObj ... {{headline.title}}

不工作。我认为“标题”可能包含一个对象，或者 ID 号和一个对象，我想我必须添加更多代码才能访问对象中的对象。而且，通过在第二个 ID 前加上前缀（例如“ID”：“inner272”），我可以看到 title.ID 实际上是内部 ID。

有人能解释一下这是如何工作的吗？谢谢！

Answer 1

之所以有效，是因为你的对象newsHeadlinesObj有一组属性，每个属性都有一个键和一个值，例如这个属性：

"56" :  {"ID" : "56", "title" : "Title ...", "image" : "image1.JPG", "itemtext" : "Full story ..."}

有密钥：56，值为：

{"ID" : "56", "title" : "Title ...", "image" : "image1.JPG", "itemtext" : "Full story ..."}

当您使用带有ng-repeat 的对象时，angular 将迭代对象的属性，在您的情况下是对象：newsHeadlinesObj。

如果在ng-repeat 中你只要求值，就像你在这里做的那样：

ng-repeat="headline in newsHeadlinesObj ... {{headline.title}}

Angular 只会为您提供值，但您也可以要求提供密钥，如下所示：

ng-repeat="(key, headline) in newsHeadlinesObj ... {{key}}

然后您就可以同时访问：键和值。