在Ionic的收集重復中顯示JSON結果

Question

我正在嘗試基於下面給出的Codepen項目鏈接的簡單應用程序。

而不是像下面那樣使用手動創建的pets數組的值：

var pets = [];

  for (var i=0; i<3000; i++) {
    pets[i] = {
      id: i,
      'firstName': 'Name' + i
    };

  }

http://codepen.io/mhartington/pen/sCdjL

我正在使用HTTP適配器從此處獲取數據： Http源API

它返回的JSON數據具有以下格式：

{
   "array": [
      {
         "id": 804131,
         "t1": "Somerset",
         "t2": "Durham MCCU"
      },
      {
         "id": 804133,
         "t1": "Sussex",
         "t2": "LeedsBradford MCCU"
      }
   ],
   "isSuccessful": true,
   "responseHeaders": {
      "Alternate-Protocol": "80:quic,p=0.5",
      "Content-Length": "327",
      "Content-Type": "application\/json; charset=ISO-8859-1",
      "Date": "Thu, 02 Apr 2015 19:52:55 GMT",
      "Last-Modified": "Thu, 02 Apr 2015 19:52:55 UTC",
      "Server": "Google Frontend"
   },
   "responseTime": 529,
   "statusCode": 200,
   "statusReason": "OK",
   "totalTime": 529
}

這是我的controller.js文件：

    angular.module('ionicApp', ['ionic'])

.factory('PetService', function () {

  var pets = [];
  fetchUserData();
  function fetchUserData() {
        var invocationData = {
            adapter : 'HTTPCricket',
            procedure : 'getHTTPCrickets'
        };
        WL.Client.invokeProcedure(invocationData,{
            onSuccess : loadFeedsSuccess,
            onFailure : loadFeedsFailure
        });
  }
  function loadFeedsFailure(result){
        windows.alert("nope")
    }

    function loadFeedsSuccess(result){
        WL.Logger.debug("Adapter retrieve success");
            WL.Logger.debug("RESULTSET:"+result.invocationResult.array.length);
             pets= result.invocationResult;
              WL.Logger.debug("RESULTSET:"+pets.array[0].t1);
    }
  return {
    all: function () {
      return pets;
    },
    get: function (petId) {

      return pets[petId];
    }
  };

})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('tabs', {
    url: "/tabs",
    abstract: true,
    templateUrl: "views/tabs.html"
  })


  .state('tabs.master', {
    url: "/master",
    views: {
      'main': {
        controller:'MasterCtrl',
        templateUrl: "views/master.html"
      }
    }
  })

  .state('tabs.detail', {
    url: "/detail/:petsId",
    views: {
      'main': {
        controller:'DetailCtrl',
    templateUrl: "views/detail.html"
      }
    }
  });


  $urlRouterProvider.otherwise("tabs/master");
})




.controller('MasterCtrl', function($scope, PetService, $ionicScrollDelegate) {

  $scope.pets = PetService.all();

  $scope.scrollBottom = function() {
    $ionicScrollDelegate.scrollBottom(true);
  };


})

.controller('DetailCtrl', function($scope, $stateParams, PetService) {

  $scope.pet = PetService.get($stateParams.petsId);

});

這就是我嘗試使用Ionic的collection-repeat在其視圖中顯示它的方式：“ master.html”。 該頁面的控制器是MasterCtrl中的MasterCtrl

代碼塊視圖：

<div class="list">
              <a class="item my-item item-thumbnail-left"
                 collection-repeat="pet in pets.array | filter:filter"
                 collection-item-height="90"
                 collection-item-width="'100%'"
                 ui-sref="tabs.detail({petsId: pet.id })">
                  <h2>{{pet.t1}}</h2>
                  <p>{{pet.t2}}</p>
               </a>
             </div>

適配器完成了工作，我可以看到pets數組中的值甚至可用，但是我看不到t1和t2值在應用程序中顯示為列表。

有人可以讓我知道我做錯了嗎？

Answer 1

謝謝@shakib，正如您提到的，我必須設計一個延遲承諾模式。 我從這里發現了如何做到這一點： http : //www.raymondcamden.com/2015/04/08/using-mobilefirst-http-adapters-with-an-ionic-application