Sunday, April 29, 2018

109 Ionic Manipulate Data List

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 .
This demo is based on https://gist.github.com/marcelpetersen/6f938446833a634094b2 .

1) Start with startup codes.

http://codepen.io/notarazi/pen/NdZWwy

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 lorquelle 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=h

visit 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)