在离子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-指令

如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]

如何在angularjs中动态地将样式属性添加到具有ng-class的元素

AngularJS 指令