Tuesday, March 27, 2018

113 Ionic1 List

113 Ionic1 List



.
ionicv1 tutorial

113 Ionic1 List

Note

ion-list

Delegate: $ionicListDelegate

The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
Both the list, which contains items, and the list items themselves can be any HTML element. The containing element requires the list class and each list item requires the item class.
However, using the ionList and ionItem directives make it easy to support various interaction modes such as swipe to edit, drag to reorder, and removing items.
Related: ionItem, ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.

Codes

<html>
<head>
<meta charset="utf-8">
<meta  name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title></title>
<!--local lib-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<!--cloud lib-->
<script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!--<script src="cordova.js"></script> -->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above-->
<!--<link href="css/ionic.app.css" rel="stylesheet">-->
<!--local lib-->
<!--<link href="lib/ionic/css/ionic.css" rel="stylesheet">-->
<!--cloud lib-->
<link href="http://code.ionicframework.com/1.3.2/css/ionic.css" rel="stylesheet">
<!--ionic custom styling-->
<style>
  .platform-ios .manual-ios-statusbar-padding{padding-top:20px}.manual-remove-top-padding{padding-top:0}.manual-remove-top-padding .scroll{padding-top:0!important}.list.card.manual-card-fullwidth,ion-list.manual-list-fullwidth div.list{margin-left:-10px;margin-right:-10px}.list.card.manual-card-fullwidth>.item,ion-list.manual-list-fullwidth div.list>.item{border-radius:0;border-left:0;border-right:0}.show-list-numbers-and-dots ul{list-style-type:disc;padding-left:40px}.show-list-numbers-and-dots ol{list-style-type:decimal;padding-left:40px}
</style>
</head>  
<body ng-app="app" animation="slide-left-right-ios7" >
  <div>
    <div>
      <ion-nav-bar class="bar-stable">
        <ion-nav-back-button></ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </div>
  </div>
  <script id="home.html" type="text/ng-template">

    <ion-view title="Home" id="page1">
   <ion-nav-buttons side="left" class="has-header">
        <button class="button button-icon icon ion-ios-minus-outline"
          ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right" class="has-header">
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
            Reorder
        </button>
  </ion-nav-buttons>
     
      <ion-content padding="true" class="has-header">
      <!-- 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>
    </ion-view>
  </script>
  <script>
/*create js object app, bind to html app, use ionic framework*/    
var app=angular.module(app,[ionic]);
/******************************/
/*define CONTROLLERS & CONFIGS*/
/******************************/      
/*define app.controller methods*/    
app.controller(homeCtrl,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 },
link download
Posted by at

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)