angularjs ng-repeat 在 ionic v1 中添加新数据后不更新
angularjs ng-repeat not updating after adding new data in ionic v1
ng-repeat 在添加新数据并用新数据更新 $scope 后没有更新。在我的例子中,用户将添加新地址,它将 return 到主页视图,这里的 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,但没有成功。
请帮助我为我自己的商店开发应用程序。我是这个离子和 angularjs 的新手。提前致谢
既然你说你正在获取 console.log(data.data) 中的数据并引用 AngularJS - refresh ng-repeat,
尝试在 $scope.addresses = data.data 之后添加 $scope.$apply();
所以:
$scope.addresses = data.data;
$scope.$apply();
这里我使用的是 ng-init。 ng-init 在 app-cycle 中只触发一次,所以这里有清楚的解释,比如使用 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();
})
})
ng-repeat 在添加新数据并用新数据更新 $scope 后没有更新。在我的例子中,用户将添加新地址,它将 return 到主页视图,这里的 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,但没有成功。 请帮助我为我自己的商店开发应用程序。我是这个离子和 angularjs 的新手。提前致谢
既然你说你正在获取 console.log(data.data) 中的数据并引用 AngularJS - refresh ng-repeat, 尝试在 $scope.addresses = data.data 之后添加 $scope.$apply(); 所以:
$scope.addresses = data.data;
$scope.$apply();
这里我使用的是 ng-init。 ng-init 在 app-cycle 中只触发一次,所以这里有清楚的解释,比如使用 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();
})
})