قائمة الأيونية من العمليات

القائمة هي تستخدم على نطاق واسع في معظم تطبيقات الجوال من عناصر واجهة. 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

ممتلكات	نوع	التفاصيل
مندوب مقبض (اختياري)	`字符串`	يتم تعريف مقبض مع `$ionicListDelegate` القائمة.
عرض-حذف (اختياري)	`布尔值`	حذف قائمة زر من العناصر المعروضة حاليا أو خفية.
عرض-إعادة ترتيب (اختياري)	`布尔值`	رتب قائمة زر البنود المعروضة حاليا أو مخفية.
يمكن، انتقد (اختياري)	`布尔值`	ما إذا كان يسمح عنصر القائمة إلى الشريحة زر خيارات العرض. الافتراضي: صحيح.

أمثلة

كود 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.w3big.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.w3big.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('../try/demo_source/finger.png'), auto;
}

شفرة جافا سكريبت

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

السابق: رئيس الأيونية وأسفل

القادمة: عملية تحميل الأيونية

ionic مسار

ionic CSS

ionic JavaScript