ionic 列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。

用法


<ion-list>

  <ion-item ng-repeat="item in items">

    Hello, {{item}}!

  </ion-item>

</ion-list>

高级用法: 缩略图，删除按钮，重新排序，滑动


<ion-list ng-controller="MyCtrl"

          show-delete="shouldShowDelete"

          show-reorder="shouldShowReorder"

          can-swipe="listCanSwipe">

  <ion-item ng-repeat="item in items"

            class="item-thumbnail-left">



    <img ng-src="{{item.img}}">

    <h2>{{item.title}}</h2>

    <p>{{item.description}}</p>

    <ion-option-button class="button-positive"

                       ng-click="share(item)">

      分享

    </ion-option-button>

    <ion-option-button class="button-info"

                       ng-click="edit(item)">

      编辑

    </ion-option-button>

    <ion-delete-button class="ion-minus-circled"

                       ng-click="items.splice($index, 1)">

    </ion-delete-button>

    <ion-reorder-button class="ion-navicon"

                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">

    </ion-reorder-button>



  </ion-item>

</ion-list>

API

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄定义带有`$ionicListDelegate`的列表。
show-delete (可选)	`布尔值`	列表项的删除按钮当前是显示还是隐藏。
show-reorder (可选)	`布尔值`	列表项的排序按钮当前是显示还是隐藏。
can-swipe (可选)	`布尔值`	列表项是否被允许滑动显示选项按钮。默认：true。

实例

HTML 代码：


<html ng-app="ionicApp">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Ionic List Directive</title>

   

    <link href="http://www.ez4code.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.ez4code.com/static/ionic/js/ionic.bundle.min.js"></script>

  </head>



  <body ng-controller="MyCtrl">

    

    <ion-header-bar class="bar-positive">

      <div class="buttons">

        <button class="button button-icon icon ion-ios-minus-outline"

          ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>

      </div>

      <h1 class="title">Ionic Delete/Option Buttons</h1>

      <div class="buttons">

        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">

            Reorder

        </button>

      </div>

    </ion-header-bar>



    <ion-content>



      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

      

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



        <ion-item ng-repeat="item in items" 

                  item="item"

                  href="#/item/{{item.id}}" class="item-remove-animate">

          Item {{ item.id }}

          <ion-delete-button class="ion-minus-circled" 

                             ng-click="onItemDelete(item)">

          </ion-delete-button>

          <ion-option-button class="button-assertive"

                             ng-click="edit(item)">

            Edit

          </ion-option-button>

          <ion-option-button class="button-calm"

                             ng-click="share(item)">

            Share

          </ion-option-button>

          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>

        </ion-item>



      </ion-list>



    </ion-content>

      

  </body>

</html>

CSS 代码


body {

  cursor: url('../../../images/ez4code/try_demo_source_finger.png'), auto;

}

JavaScript 代码


angular.module('ionicApp', ['ionic'])



.controller('MyCtrl', function($scope) {

  

  $scope.data = {

    showDelete: false

  };

  

  $scope.edit = function(item) {

    alert('Edit Item: ' + item.id);

  };

  $scope.share = function(item) {

    alert('Share Item: ' + item.id);

  };

  

  $scope.moveItem = function(item, fromIndex, toIndex) {

    $scope.items.splice(fromIndex, 1);

    $scope.items.splice(toIndex, 0, item);

  };

  

  $scope.onItemDelete = function(item) {

    $scope.items.splice($scope.items.indexOf(item), 1);

  };

  

  $scope.items = [

    { id: 0 },

    { id: 1 },

    { id: 2 },

    { id: 3 },

    { id: 4 },

    { id: 5 },

    { id: 6 },

    { id: 7 },

    { id: 8 },

    { id: 9 },

    { id: 10 },

    { id: 11 },

    { id: 12 },

    { id: 13 },

    { id: 14 },

    { id: 15 },

    { id: 16 },

    { id: 17 },

    { id: 18 },

    { id: 19 },

    { id: 20 },

    { id: 21 },

    { id: 22 },

    { id: 23 },

    { id: 24 },

    { id: 25 },

    { id: 26 },

    { id: 27 },

    { id: 28 },

    { id: 29 },

    { id: 30 },

    { id: 31 },

    { id: 32 },

    { id: 33 },

    { id: 34 },

    { id: 35 },

    { id: 36 },

    { id: 37 },

    { id: 38 },

    { id: 39 },

    { id: 40 },

    { id: 41 },

    { id: 42 },

    { id: 43 },

    { id: 44 },

    { id: 45 },

    { id: 46 },

    { id: 47 },

    { id: 48 },

    { id: 49 },

    { id: 50 }

  ];

  

});