在离子v1中添加新数据后,angularjs ng-repeat不会更新

时间:2017-12-21 06:16:28

标签: javascript angularjs ionic-framework angularjs-scope 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 });

我在路由和主页面上尝试过cache false,但它没有用。 请帮我为我自己的商店开发应用程序。我是这个离子和棱镜的新手。提前致谢

2 个答案:

答案 0 :(得分:1)

既然你说你在console.log(data.data)中获取数据并且引用了AngularJS - refresh ng-repeat, 尝试在$ scope.addresses = data.data之后添加$ scope。$ apply(); 这样:

$scope.addresses = data.data;
$scope.$apply();

答案 1 :(得分:1)

这里使用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();
})




})