首页 > 代码库 > ionic listview对象的编辑、排序和删除

ionic listview对象的编辑、排序和删除

2024-08-28 10:57:47   219人阅读

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/

 

ionic listview对象的编辑、排序和删除


联系
我们