Question

当我们将列表向左滑动时，我有一个数据列表，用于删除具有删除功能的离子列表。

我能够使删除功能起作用，但是在成功响应和列表刷新后，删除按钮仍显示在我们之前点击的索引中。

我正在使用$scope.data.splice($index, 1);

这是我的代码

HTML

<ion-pane>
  <ion-view view-title="Incoming list">
    <ion-nav-buttons side="right">
      <a class="button" href="#/app/fg-in-add">
        <i class="icon ion-plus"></i>
      </a>
      <a class="button" href="#/app/scanner-fg-in">
        <i class="icon ion-qr-scanner"></i>
      </a>
    </ion-nav-buttons>

    <ion-content class="has-header">
      <div class="list">
        <div class="item item-input-inset">
          <label class="item-input-wrapper">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" ng-model="fgin.search" class="textUppercase">
          </label>
          <button class="button button-small">
            <i class="icon ion-search"></i> Search
          </button>
        </div>
      </div>
      <ion-list show-delete="false" can-swipe="true">
        <ion-item ng-repeat="x in data track by $index" class="item-remove-animate">
          <!-- <ion-option-button class="button-positive icon ion-edit" on-touch="deleteFGin({{x.mif_no}})"></ion-option-button> -->
          <ion-option-button class="button-assertive icon ion-trash-a" on-touch="Delete(x.mif_no,x.item_no,$index); x.deleted = true;"></ion-option-button>
          <h3><i class="icon ion-android-apps"></i> {{x.mif_no}} <i class="icon ion-ios-arrow-thin-right"></i> {{x.item_no}}</h3>
          <hr />
          <div class="descr"><i class="icon ion-grid"></i> <span class="judul">{{x.part_no}}</span> <i class="icon ion-ios-arrow-thin-right"></i> {{x.part_name}}</div>
          <div class="descr indentlitte">{{x.qty}} {{x.u_measure}}<i class="icon ion-ios-arrow-thin-right"></i> {{x.rack_no}}</div>
          <span class="badge badge-clear">{{x.date}}</span>
        </ion-item>
      </ion-list>
    </ion-content>

  </ion-view>
</ion-pane>

JS

$scope.Delete = function(docno,itemno,index){
  $http({
    method: "post",
    url: apiServer + "/fg-in-del.php",
    data: {
      mifno: docno,
      itemno: itemno,
      Dbserver: window.localStorage.getItem("server"),
      Dbuser: window.localStorage.getItem("username"),
      Dbpass: window.localStorage.getItem("password"),
      Dbname: window.localStorage.getItem("dbname"),
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    }
  }).then(function(response) {
    if (response.data == 1){
      var alertPopup = $ionicPopup.alert({
        title: 'Delete',
        template: 'Data has been deleted.'
      });
      $scope.data.splice(index, 1);
    }else {
      var alertPopup = $ionicPopup.alert({
        title: 'Delete',
        template: 'Failed to delete data.'
      });
      console.log(response.data);
    }
  }, function(response) {
    $scope.data=response.data;
    var alertPopup = $ionicPopup.alert({
      title: 'Delete',
      template: 'Failed to delete data.'
    });
  });
}

Answer 1

这太奇怪了，因为昨晚我发现我的应用程序完全一样，我认为这可能是个错误。我选择从服务器刷新整个列表，但如果这不是您的选项，您可以在控制器中注入$ionicListDelegate并在拼接后调用$ionicListDelegate.closeOptionButtons()。

在离子列表中的splice方法，列表获得刷新但仍然显示删除按钮

1 个答案: