带有动态列表的离子标签
Ionic tabs with dynamic lists
>我创建了一个带有选项卡的离子项目,该项目在服务中使用此代码显示动态列表.js:
.factory('Interventions', function($http) {
var interventions = {};
$http({
method: 'POST',
url: 'http://172.20.1.1/list.php'
}).success(function(data, status, headers, config) {
interventions = data;
});
return {
all: function() {
return interventions;
},
get: function(iid) {
return interventions[iid];
}}
})
问题是我的应用程序在加载页面时一开始没有显示列表,但仅在我刷新它(使用 doRefresh(或转到其他选项卡并返回第一个选项卡时显示列表。有没有解决方案可以解决这个问题?
提前谢谢你
我的代码 i ncontroller.js:
.controller('InterventionCtrl', function($scope, $http, Interventions) {
$scope.interventions = Interventions.all();
$scope.doRefresh = function() {
$http.get('http://172.20.1.1/list.php')
.success(function(newItems) {
$scope.interventions = newItems;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
};
})
.controller('InterventionDetailCtrl', function($scope, $stateParams, Interventions) {
$scope.intervention = Interventions.get($stateParams.iid);
});
我的观点是:
<ion-view title="Interventions">
<ion-content>
<ion-list>
<ion-item ng-repeat="intervention in interventions" type="item-text-wrap" href="#/tab/interventions/{{intervention.ID}}">
<h3>{{intervention.Nom}}</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Interventions.all(( 发出一个异步的 http 请求。您无法保证在调用 all(( 时数据可用。所以 all(( 不能返回数据。你必须传递一个回调,类似的东西(未经测试(:
var interventions = {};
var doRequest = function(callback) {
$http({
method: 'POST',
url: 'http://172.20.1.1/list.php'
}).success(function(data, status, headers, config) {
interventions = data;
callback(data);
});
})
return {
all: function(callback) {
if (interventions) {
callback(interventions)
} else {
doRequest(callback)
}
},
get: function(iid,callback) {
if (interventions) {
callback(interventions[iid])
} else {
doRequest(function(data){
callback(data[iid])
})
}
}
}
在您的控制器中:
Interventions.all(function(interventions) {
$scope.interventions = interventions;
}
Interventions.get(iid,function(intervention) {
$scope.intervention = intervention;
}
您可以在此处找到有关异步的更多信息:如何从异步调用返回响应?
相关文章:
- 对象 Javascript 中的标签无效 - 想要添加事件列表器
- 如何为给定对象附加标签列表
- jQuery Tag-It – 如何在选择标签时自动显示自动完成列表
- 在jquery javascript中单击下拉列表时更改标签
- 如何使用 jquery 检查该值是否存在于带有标签的 select2 下拉列表中:true
- asp.net 数据列表中的跟踪标签 ID
- 将列表拆分为两列.列表没有't具有块,但是需要在最接近的<p>标签
- 在CKEditor 4.x中,有没有办法在初始化后获取允许的标签列表
- 如何使用 js 动态创建 标签列表
- 如何使用引导验证程序验证输入标签列表
- 如何将序列化的表单转换为具有标签列表的json格式
- 匹配推文中可能的标签列表-Javascript或jQuery
- 活动类默认为标签列表
- 标签列表过滤动画
- 如何从标签列表中获取对象属性到javascript变量
- Set class='selected '在多个选项标签(列表/菜单)中
- 按母语人士的数量寻找一个好的ISO语言标签列表
- 使用Flickr API获取指定照片集的标签列表
- 使用Javascript Use API获取标签列表
- Javascript库/ jquery插件,使我能够单击标签列表输入它们