.
110 Ionic Form and Ion-Scroll
This tutorial demonstrates how to build a simple messaging apps.
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-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'
})
$urlRouterProvider.otherwise('/page1')
});
|
CODEPEN:
DEMO:
.
No comments:
Post a Comment