Sunday, April 1, 2018

110 Ionic Form and Ion Scroll

110 Ionic Form and Ion Scroll



.
110 Ionic Form and Ion-Scroll

This tutorial demonstrates how to build a simple messaging apps. 

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-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-content padding="false" scroll="false" class="has-header">
                <ion-scroll class="top-container" delegate-handle="messagelist">
                    <ion-list>
                        <ion-item ng-repeat="entry in entries">
                            <h2>{{entry.name}}</h2>
                            <p>{{entry.email}}</p>
                        </ion-item>
                    </ion-list>
                </ion-scroll>
                <form class="bottom-form" ng-submit="addMessage()">
                    <br/>
                    <label class="item item-input">
        <span class="input-label">Name</span>
        <input type="text" placeholder=""
        ng-model="data.name">
      </label>
                    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" placeholder=""
        ng-model="data.email">
      </label>
                    <label class="item item-input">
        <span class="input-label">Message</span>
        <input type="text" placeholder=""
        ng-model="data.message">
      </label>
                    <button class="button button-positive  button-full">Submit</button>
                </form>
            </ion-content>
        </ion-view>
    </script>
</body>
</html>
CSS
.top-container{
    height: calc(100% - 220px);
   overflow:scroll;
}
.bottom-form{
    position:absolute;
    bottom:0px;
    display:block;
    width:100%;
    background-color:lightgrey;
    button{
        margin:0px !important;
    }
}
/*
the following css codes overcome
the double scroll bar issues
*/
::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
}
JS
angular.module(app, [ionic])
.controller(homeCtrl, [$scope, $ionicScrollDelegate,
function ($scope,$ionicScrollDelegate) {
  $scope.entries=[];
  $scope.data={};
  $scope.addMessage=function(){
    $scope.entries.push($scope.data);
    $scope.data={};
    $ionicScrollDelegate.$getByHandle(messagelist).scrollBottom();
    console.log($scope.entries);
  }
}])
   
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state(home, {
    url: /page1,
    templateUrl: home.html,
    controller: homeCtrl
  })
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)