列表几乎是所有移动 App 里都绕不开的一类界面元素，使用场景非常广。ionList 和 ionItem 这两个指令也不只是用来展示内容，它们还内置了不少常见的交互方式，比如删除某一项、拖拽调整顺序、滑动后进行编辑等。

用法

  
    Hello, {{item}}!
  

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

  

    
{{item.title}}
    
{{item.description}}
    
      分享
    
    
      编辑
    
    
    
    
    

API

实例

HTML 代码：

  
    
    
    

    
  


      

        
      
      
Ionic Delete/Option Buttons
      

        
            Reorder
        
      
    




          Item {{ item.id }}
          
          
          
            Edit
          
          
            Share
          
          
        

CSS 代码

body {
  cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

Ja vaScript 代码

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 }
  ];
});