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”），我能够看到headline.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}}

然后你就可以访问：密钥和值。

ng-repeat和对象/数组结构

1 个答案: