[英]Displaying JSON result in Ionic's collection-repeat
I am trying out a simple app based on the codepen project link given below. 我正在尝试基于下面给出的Codepen项目链接的简单应用程序。
Instead of using the values of the pets array created manually as in: 而不是像下面那样使用手动创建的pets数组的值:
var pets = [];
for (var i=0; i<3000; i++) {
pets[i] = {
id: i,
'firstName': 'Name' + i
};
}
http://codepen.io/mhartington/pen/sCdjL http://codepen.io/mhartington/pen/sCdjL
I'm fetching my data using a HTTP adapter from here: Http source API 我正在使用HTTP适配器从此处获取数据: Http源API
The JSON data it returns is of the format: 它返回的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
}
This is my controller.js file: 这是我的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);
});
And this is how I'm trying to display it using Ionic's collection-repeat in my view: "master.html". 这就是我尝试使用Ionic的collection-repeat在其视图中显示它的方式:“ master.html”。 The controller for this page is
MasterCtrl
in the controller.js 该页面的控制器是
MasterCtrl
中的MasterCtrl
CODE BLOCK-VIEW: 代码块视图:
<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>
The adapter does it's job and I can see the values are even available in the pets array, but I don't see the the t1 and t2 values displayed as a list in the application. 适配器完成了工作,我可以看到pets数组中的值甚至可用,但是我看不到t1和t2值在应用程序中显示为列表。
Could anyone please let me know what I'm doing wrong? 有人可以让我知道我做错了吗?
Thank you @shakib, I had to devise a deferred- promise pattern as you mentioned. 谢谢@shakib,正如您提到的,我必须设计一个延迟承诺模式。 I found out how to do that from here : http://www.raymondcamden.com/2015/04/08/using-mobilefirst-http-adapters-with-an-ionic-application
我从这里发现了如何做到这一点: http : //www.raymondcamden.com/2015/04/08/using-mobilefirst-http-adapters-with-an-ionic-application
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.