Labels

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Tuesday, January 10, 2017

109 Ionic Manipulate Data List


.
109 Ionic Manipulate Data List
This tutorial demonstrates how to manipulate data list that has been populated by data from Google Sheet in the previous tutorial, http://basic-steps.blogspot.my/2017/01/108-ionic-gets-data-from-google-sheets.html .

1) Start with startup codes.

2) Add demo codes.

HTML
<html>
<head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
</head>
<body ng-app="app">
    <div>
        <div>
            <ion-nav-view></ion-nav-view>
        </div>
    </div>
    <script id="home.html" type="text/ng-template">
        <ion-header-bar class="bar-dark">
            <button class="button button-icon ion-minus-circled" ng-click="data.showDelete = !data.showDelete; data.showReorder = false;"></button>
            <h1 class="title">Ionic Backend : Lire une spreadsheet</h1>
            <button class="button button-icon ion-navicon" ng-click="data.showReorder = !data.showReorder; data.showDelete = false;"></button>
        </ion-header-bar>
        <ion-view title="Home" id="page1">
            <div class="bar
                  bar-subheader
                  item-input-inset
                  bar-light">
                <label class="item-input-wrapper">
          <i class="icon
                    ion-search
                    placeholder-icon">
          </i>
          <input type="search"
                 ng-model="query"
                 placeholder="Rechercher" />
        </label>
            </div>
            <ion-content padding="true" class="has-subheader">
                <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
                    <ion-item ng-class="{'star' : item.star}" ng-repeat='item in contacts | filter:query' class="item-thumbnail-left
                     item-icon-right
                     item-text-wrap">
                        <img ng-src="http://placehold.it/100/100" alt="photo" />
                        <h2>{{item.prenom | uppercase}} {{item.nom | uppercase}} </h2>
                        <h2>{{item.fonction}}</h2>
                        <p>{{item.mobile}}</i>
                        </p>
                        <p>{{item.bio | limitTo: 20}} {{item.bio.length > 20 ? '&hellip;' : ''}}
                            <p>
                                <button class="button button-clear icon ion-star button-assertive" ng-click="toggleStar(item)" ; ng-show="item.star"></button>
                                <ion-option-button class="button-dark" ng-click="toggleStar(item)">
                                    <i class="icon ion-star"></i>
                                </ion-option-button>
                                <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)">
                                </ion-delete-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>
</body>
</html>
CSS
/* griser la liste lorqu'elle a une star*/
.star>.item-content {
  background-color: #fffb00 !important;
}
/* ajuster sub-header*/
.has-subheader {
    top: 120px;
}
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope','$http',
function ($scope, $http) {
  function getData(){
    var url='https://spreadsheets.google.com/feeds/list/1rfhJmGhsBpi7OZyhnr8mOibxoIq0uID_wKuhxwJJgOw/od6/public/values?alt=json';
    $http.get(url)
      .then(function(resp) {
        console.log('Success', resp);    
        EntryTab = resp.data.feed.entry;
        console.log('CONTACTS', EntryTab);
        console.log('NOM', EntryTab[0].gsx$nom.$t)
           $scope.contacts = lireData();
        }, function(err) {
        // err.status will contain the status code
        console.error('ERROR', err);
      })
   }//getData()
  getData();
  // supprimer un contact
       $scope.onItemDelete = function(item){
          $scope.contacts.splice($scope.contacts.indexOf(item), 1);
        }
    // rafraichir l'écran
      console.log('resultat' , $scope.contacts);  
      $scope.doRefresh =  function() {
        $scope.contacts = lireData();// trouver la solution        
        $scope.$broadcast('scroll.refreshComplete');
      }  
    // afficher étoile lorsqu'on swipe
        $scope.toggleStar = function(item){
          item.star = !item.star;          
        }
    // arranger la liste de contacts deplacements
        $scope.moveItem = function(item, fromIndex, toIndex){
          $scope.contacts.splice(fromIndex, 1);
          $scope.contacts.splice(toIndex, 0, item);
        };

   
}])
   
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')
});
 function lireData(){  
    console.log('RES refresh', EntryTab);
    var tabContacts = [];
    for (key in EntryTab) {
         var contact = {};
         contact.nom = (EntryTab[key].gsx$nom.$t);
         contact.prenom = (EntryTab[key].gsx$prenom.$t);
         contact.fonction = (EntryTab[key].gsx$fonction.$t);
         contact.bio = (EntryTab[key].gsx$bio.$t);
         contact.photo = (EntryTab[key].gsx$photo.$t);
         contact.telephone = (EntryTab[key].gsx$telephone.$t);
         contact.mobile = (EntryTab[key].gsx$mobile.$t);
         contact.email = (EntryTab[key].gsx$email.$t);      
        /*la méthode push rajoute des éléments au tableau*/
         console.log ( 'KEY', key)
         tabContacts.push(contact);
        }
         console.log('TAB', tabContacts[key]);       
      return tabContacts;
  }



DEMO:
See the Pen 109 Ionic Manipulate Data List 1 by notarazi (@notarazi) on CodePen.

No comments:

Post a Comment