ionic listview對象的編輯、排序和刪除

1）ionic的listview對象即<ion-list></ion-list>

 

2）添加並顯示編輯按鈕（添加其他自定義按鈕也一樣）

can-swipe屬性設置為true（默認就是true），在ion-item里添加一個編輯按鈕

 

<ion-list can-swipe="true">
  <ion-item ng-repeat="item in lists">
    {{item.name}}
    <ion-option-button class="button-assertive" ng-click="edit(item)">Edit</ion-option-button>
  </ion-item>
</ion-list>

 

 

3）添加並顯示排序按鈕

排序按鈕有自己名字，不是用<ion-option-button></ion-option-button>，排序按鈕名字為：<ion-reorder-button></ion-reorder-button>

使用方法也很簡單，ion-list的show-reoder屬性設置為true，再在ion-item里添加一個排序按鈕就行了

<ion-list show-reorder="true">
  <ion-item ng-repeat="item in lists">
    {{item.name}}
    <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
  </ion-item>
</ion-list>

 

4）添加並顯示刪除按鈕

方法同上，刪除按鈕的名字為：<ion-delete-button></ion-delete-button>

使用方法也是先在ion-list上設置show-delete屬性為true，再ion-item里添加一個刪除按鈕就行了

<ion-list show-delete="true">
  <ion-item ng-repeat="item in lists">
  <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button>
    {{item.name}}
  </ion-item>
</ion-list>

 

PS1：上面說的 show-reorder、show-delete 一般我們不會是一進入列表就顯示的，需要進行排序、刪除操作里才顯示出按鈕，所以show-reorder、show-delete當然不必直接寫死true/false啦，可以使用$scope變量就可以了

示例：

 <ion-list show-delete="data.showDelete" show-reorder="data.showReorder"></ion-list>

 

PS2：上面的on-reorder是排序操作的回調操作，每次改變item的排序后都會回調，ng-click不用說就一個點擊事件

 

PS3：不管是編輯、排序或刪除，其實就是一個數據操作，改變數據數組的值就可以了，下面給出一下官方的js參考

$scope.edit = function(item) {
  alert('Edit Item: ' + item.id);
};

$scope.moveItem = function(item, fromIndex, toIndex) {
  $scope.lists.splice(fromIndex, 1);
  $scope.lists.splice(toIndex, 0, item);
};

$scope.onItemDelete = function(item) {
  $scope.lists.splice($scope.lists.indexOf(item), 1);
};

實際應用時，用的是數據庫的數據，不只是操作數組就完事了，不過那也只是寫個異步處理一下就可以了，這里就不說了

 

官方文檔：http://ionicframework.com/docs/api/directive/ionList/