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/