• 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/

  • 相关阅读:
    Elasticsearch搜索引擎学习笔记(二)
    Elasticsearch搜索引擎学习笔记(一)
    Redis集群(cluster模式)搭建(三主三从)
    Redis主从、哨兵
    oracle 数据查询 返回树形结构的每一级的id
    oracle 数据库查询 COALESCE字符函数
    java 生成不重复的6位数字 +年月日
    oracle 数据库查询CLOB类型 报错 【ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB】
    oracle 数据表结构和数据 导入 导出
    sql 创建数据库表结构
  • 原文地址:https://www.cnblogs.com/tujia/p/6206922.html
Copyright © 2020-2023  润新知