在离子v1中添加新数据后,angularjs ng-repeat不会更新
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在离子v1中添加新数据后,angularjs ng-repeat不会更新相关的知识,希望对你有一定的参考价值。
添加新数据并使用新数据更新$ scope后,ng-repeat未更新。在我的情况下,用户将添加新地址,并且它将返回到主视图,此处ng-repeat数据未使用最新地址更新。
这是我的代码
<ion-view ng-init="useraddresses()" title='<img class="title-image" src="http://example.com/images/logo/Logo.png" width="49" height="43"/>' >
<div id="placeorder">
<h5 style="text-align:center">Place Your Order</h5>
<div style="clear:both"></div>
<a class="button button-positive" href="#/app/newaddress"> Add New Address</a>
<!--<button >Add New Address</button>-->
<h5>Pickup Address</h5>
<ion-list >
<ion-item id="{{x.id}}" ng-click="changes(x.id)" ng-repeat="x in addresses track by $index" style="width:50%;float:left;border:1px double black;min-height:150px;">
<div style="width:100%;height:100%;">
<strong>{{x.address}}</strong>
<div style="clear:both;"></div>
Landmark : {{x.landmark}}
<div style="clear:both;"></div>
pincode : {{x.pincode}}
</div>
</ion-item>
</ion-list>
<div style="clear:both"></div>
<button class="button button-block button-positive" style="background-color:#ec008c;" ng-disabled="placeorderbutton" ng-click="placeorder()"> Place Order</button>
</div>
这是我的控制器代码
$scope.useraddresses = function () {
$scope.showloading();
$http.post('http://example.com/RestServiceImpl.svc/getaddresses', { phone: localStorage.getItem('phone'), code: localStorage.getItem('code') },
{
headers: { 'Content-Type': 'application/json' }
})
.then(data => {
$scope.addresses.length = 0;
$scope.addresses = data.data;
// $scope.addresses = data.data
console.log(data.data);
$ionicLoading.hide();
});
在添加新地址后添加新控制器使用此导航回主页面
$state.go('app.search', {}, { location: "replace", reload: true, inherit: false });
我已尝试在路由和主页中缓存false但它没有用。请帮我为我自己的商店开发应用程序。我是这个离子和棱镜的新手。提前致谢
答案
既然你说你在console.log(data.data)中获取数据并引用AngularJS - refresh ng-repeat,请尝试在$ scope.addresses = data.data之后添加$ scope。$ apply();所以:
$scope.addresses = data.data;
$scope.$apply();
另一答案
这里我使用ng-init。 ng-init在应用程序循环中只触发一次,所以在这里明确解释如使用ng-controller和ionicview.enter来解决这个问题Run a controller function whenever a view is opened/shown
这是编辑过的代码
<ion-view ng-controller="indexController" ng-init="getaddress()" title='<img class="title-image" src="http://washghar.com/images/logo/Logo.png" width="49" height="43"/>' >
.controller('indexController', function ($scope, $http, $ionicLoading) {
$scope.$on('$ionicView.enter', function () {
$scope.showloading();
if (localStorage.getItem('userdetails') == 'complete') {
document.getElementById('updateuserdetails').style.display = 'none';
document.getElementById('placeorder').style.display = 'block';
$http.post('http://example.com/RestServiceImpl.svc/getaddresses', { phone: localStorage.getItem('phone'), code: localStorage.getItem('code') },
{
headers: { 'Content-Type': 'application/json' }
})
.then(data => {
$scope.addresses.length = 0;
console.log(data.data);
$scope.addresses = data.data;
// $scope.addresses = data.data
console.log($scope.addresses);
// $scope.$apply();
$ionicLoading.hide();
});
}
else {
document.getElementById('updateuserdetails').style.display = 'block';
document.getElementById('placeorder').style.display = 'none';
}
$ionicLoading.hide();
})
})
以上是关于在离子v1中添加新数据后,angularjs ng-repeat不会更新的主要内容,如果未能解决你的问题,请参考以下文章
为啥离子 v1 事件“beforeLeave”在离开视图后返回数据
Angular / Javascript - 重新加载ng-repeat数据后更改类
如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]