Open page within current page using onsen ui segment control - onsen-ui

I am using Segment control in my App but I am unable to switch between the segments.
I am referring this link https://onsen.io/pattern-schedule.html
I have tried and also searched a lot but cant find any solution.
My Output :
My Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>js"></script>
</head>
<script>
ons.bootstrap();
</script>
<body>
<ons-navigator animation="slide" title="Navigator" var="menu">
<ons-page var ="variable">
<ons-toolbar>
<div class="left">
</div>
<div class="center">
Menu
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-
align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
<div class="button-bar__item" ngclick="menu.setMainPage('indian.html')">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ngclick="menu.setMainPage('english.html')">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ngclick="menu.setMainPage('drinks.html')">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>
</ons-navigator>
<ons-template id="indian.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
<ons-template id="english.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
<ons-template id="drinks.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
Thanks in Advance.
Edit :
My requirements is that I want to open the templates i.e indian.html ,english.html and drinks.html within the same page on segment control click respectively like the splitview does
I am using Onsen 1
I am not using Sliding menu.
Update:I am now getting this Error...
04-11 04:58:06.471 14813-14851/com.hogo.onsenui E/AndroidProtocolHandler:
Unable to open asset URL: file:///android_asset/www/english.html
04-11 04:58:06.501 14813-14813/com.hogo.onsenui I/chromium:
[INFO:CONSOLE(108)] "Error: Page is not found: english.html
at
file:///android_asset/www/js/onsenui.js:13828:17
at
file:///android_asset/www/js/angular/angular.min.js:120:182
at n.$eval
(file:///android_asset/www/js/angular/angular.min.js:134:493)
at n.$digest
(file:///android_asset/www/js/angular/angular.min.js:132:9)
at n.$apply
(file:///android_asset/www/js/angular/angular.min.js:135:269)
at l
(file:///android_asset/www/js/angular/angular.min.js:87:152)
at F
(file:///android_asset/www/js/angular/angular.min.js:91:187)
at
XMLHttpRequest.e
(file:///android_asset/www/js/angular/angular.min.js:92:271)", source:
file:///android_asset/www/js/angular/angular.min.js (108)
Updated Code :
<body>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english.html"></ons-tab>
<ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>
<ons-toolbar>
<div class="left">
</div>
<div class="center">
Menu
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-
align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-page>
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px;
padding: 0px 5px;">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(1)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>
<ons-template id="indian.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
english Contents
</p>
</ons-page>
</ons-template>
<ons-template id="english.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
english Contents
</p>
</ons-page>
</ons-template>
<ons-template id="drinks.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
drinks Contents
</p>
</ons-page>
</ons-template>
</body>
I have hide the tabbar in my css page


There are several issues which may be preventing the program from working:
You are including angular twice
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
It's probably not the cause of your problem, but it may cause other issues - only one of the two files is enough.
<script type="text/javascript" src="js/index.js"></script>js"></script>
This also shouldn't be a problem, but tags like this may cause issues - when you have extra closing tags it's fine, but if you had an extra open tag then the whole page could be blank.
The attributes should be ng-click, not ngclick.
If you want to use the ons-navigator then the methods you have available are pushPage, popPage, replacePage. The setMainPage method which you're using is a method of the ons-sliding-menu.
If you want to have data filtered then you should:
Add ng-controller="AppController" to the body or some other parent element.
Add ng-model="a" to the radio buttons (and i guess some values).
Add the items to the $scope in the controller.
Add ng-repeat="item in items | filter: { category: category }" or something similar
So something like:
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="indian" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="english">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="drinks">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
<ons-list ng-repeat="item in items | filter: { category: category }">
<ons-list-item>{{item.name}} ...</ons-list-item>
</ons-list>
And for javascript:
ons.bootstrap().controller('AppController', function ($scope) {
$scope.a = "indian";
$scope.items = [ // put your items here
name: 'item 1', category: 'indian',
name: 'item 2', category: 'indian',
name: 'item 3', category: 'english',
name: 'item 4', category: 'english',
name: 'item 5', category: 'drinks',
name: 'item 6', category: 'drinks'
]
});
Update: I thought you wanted filtering. I'll leave the previous answer if anyone else is interested in it. And now the answer to the updated question:
What you seem to want in that case is exactly the functionality of ons-tabbar - you have tabs and tab contents - exactly what you seem to want. So you just want to have different styles for the tabs.
However styling them in that way may not be trivial and moreover the styles may break if you try to update the version. So instead I'll provide 2 other solutions, which don't require advanced css tricks:
Use a tabbar, but just hide it and link the actions from your segment control:
<div class="button-bar">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
...
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english.html"></ons-tab>
<ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>
CSS: #navi .tab-bar { display: none; }
Just use the navigator if you want to change the pages.
<ons-navigator page="indian.html" id="navi"></ons-navigator>
Add ng-click="navi.replacePage('pagename.html')" to the .button-bar__items
Add some distance on the top side of the navigator #navi { top: 40px; }

Related

html2canvas not working in angularjs

I'm trying to convert div element to canvas using html2canvas library inside angularjs controller, it throws no error in console but only gives an empty canvas, I included the html2canvas script in master page and the div element is inside a template page which is loaded using ng-view
the div element is
<div id="barcodeHtml" style="background-color: #82c6f8">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getCanvas()">get Canvas</a>
and the angular controller
$scope.getCanvas=function()
{
$scope.memberName=data.html.name;
$scope.memberSince=data.html.year;
$scope.imgSource=data.html.code;
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
what am I missing?
thank you in advance..

The issue is your div with id="barcodeHtml" does not have height so it is not able to append to the body.
Try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getConvas=function()
{
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
})
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="barcodeHtml" style="background-color: #82c6f8; height: 200px;">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getConvas()">get Convas</a>
</div>
</body>
</html>

There is an issue with your inline-styling.
I tried with removing float: left; from your upper div [from here : <div style="width: 40%;float: left; align-content: center">], then it worked.
See the working fiddle

Uncaught (in promise) Error: "html" must be one wrapper element onsenui

I am trying to write a small Cordova App. Fortunatly found OnSenUI and now working on it. But I am facing this erorr:
Uncaught (in promise) Error: "html" must be one wrapper element.
at Object.util.createElement (util.js:147)
at page-loader.js:23
I searched for many solutions, but nothing worked for me.
My whole code:
<!DOCTYPE html>
<html>
<head>
<title>New App</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item>
<ons-list-item id="ons-list-fetch" onclick="fn.load('fetchPage.html');" tappable> Fetch Data </ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page id="helloworld-page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Main </div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p>
<!-- Inputs-->
<h2 style="text-align: center; opacity: 0.6;">Just H2</h2>
<div style="text-align: center; margin-top: 30px;">
<p>
<ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
</p>
<p>
<ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
</p>
<p style="margin-top: 30px;">
<ons-button id="btnClickMe">Click Me!</ons-button>
</p>
<section style="padding: 8px">
<ons-button modifier="quiet">Forgot Password</ons-button>
</section>
</div>
<!-- eof Inputs-->
<p style="text-align: center; font-size: 14px; opicity: 0.6"> All rights reserved </p>
</ons-page>
</ons-template>
<!-- fetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
</body>
</html>

OMG Its too simple.
I was declaring <div id="divFtechHere"> outside <ons-page>
Wrong Code:
<!-- FetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
Correct Code:
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-page>
</ons-template>

Two inline Bootstrap datepickers not fitting bootstrap grid column and panel

I am a newbie when it comes to frontend. I have been working on a little single page angularjs app and I came across an issue. On my page, I need two inline datepickers. I chose angular-ui-bootstrap datepickers. They render in an odd way veiling each other:
veiling datepickers
Here's part of my HTML code:
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Date range</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-5">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false"></uib-datepicker>
</div>
<div>
<label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
</div>
</div>
<div class="col-md-5 ">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false"></uib-datepicker>
</div>
<div>
<label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label> Additional Info</label>
</div>
Do you have any idea how to make them fit the panel normally without this veiling?
Before I put datepickers into panel div, the display issue was the same. They were tighten together and not fitting the grid column.
Each help will be appreciated

As <uib-datepicker> has a fixed size and cannot be resized according to grid width, you can customize the size of the small buttons (days).
See in the snippet below the .custom-size .btn-sm CSS class:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('MyCtrl', function($scope) {
});
.custom-size .btn-sm {
padding: 4px 8px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS UI Bootstrap</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="container-fluid">
<h2>AngularJS: UI Bootstrap datepicker</h2>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Date range</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false" class="custom-size"></uib-datepicker>
</div>
<div>
<label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
</div>
</div>
<div class="col-md-6">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false" class="custom-size"></uib-datepicker>
</div>
<div>
<label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label> Additional Info</label>
</div>
</div>
</div>
</body>
</html>

Angular Material input validation error messages all showing on top of eachother

I'm making a website in angular material, which is working great except for the validation on form inputs.
When I type something into the input box, all of the error messages (required, minlength and maxlength) are show in the same place on top of each other.
Is this a bug in angular material or is there something I'm doing wrong?
This a simplified version of my problem just using the default StarterApp example, with the form input in the main page content. If you run it and type something in the text box, you should see the problem. Thank you for helping.
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<form name="userForm">
<md-input-container>
<label>Username</label>
<input name="username" ng-model="data.username" required md-maxlength="20" minlength="3">
<div ng-messages="userForm.username.$error" ng-show="userForm.username.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="md-maxlength">Your username can not be longer than 20 characters</div>
<div ng-message="minlength">Your username can not be shorter than 3 characters</div>
</div>
</md-input-container>
{{data.username}}
</form>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<!-- custom stuff -->
<style>
.md-toolbar-tools h1 {
font-size: inherit;
font-weight: inherit;
margin: inherit;
}
</style>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav',
function($scope, $mdSidenav) {
$scope.data = {
username: ""
};
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}
]);
</script>
</body>
</html>

The problem is with the angular-material.min.css file. Position in that file for md-input-container is absolute. Add your own css and set the position to relative instead of absolute. Added inline style to those divs so you could see
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<form name="userForm">
<md-input-container>
<label>Username</label>
<input name="username" ng-model="data.username" required md-maxlength="20" minlength="3">
<div style="position: relative" ng-messages="userForm.username.$error" ng-show="userForm.username.$dirty">
<div style="position: relative" ng-message="required">This field is required</div>
<div style="position: relative" ng-message="md-maxlength">Your username can not be longer than 20 characters</div>
<div style="position: relative" ng-message="minlength">Your username can not be shorter than 3 characters</div>
</div>
</md-input-container>
{{data.username}}
</form>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<!-- custom stuff -->
<style>
.md-toolbar-tools h1 {
font-size: inherit;
font-weight: inherit;
margin: inherit;
};
.md-input-container-absolute {
position: relative;
}
</style>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav',
function($scope, $mdSidenav) {
$scope.data = {
username: ""
};
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}
]);
</script>
</body>
</html>

Onsen UI: Automatic scroll with ons-list

i want to program a chat in WhatsApp style.
The latest news will be shown below, and for new messages to be automatically scrolled down.
Can anyone help me how I can realize the automatic scrolling with ons-list?
<ons-template id="chat.html">
<ons-page ng-controller="ChatController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Chat</div>
</ons-toolbar>
<ons-list style="margin-top: 10px" scroll-glue>
<ons-list-item class="item" ng-repeat="msg in messages">
<header>
<span class="item-title">{{msg.user}}</span>
</header>
<p class="item-desc">{{msg.msg}}</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>

I haven't used WhatsApp, but this might help. In an ons-page, you can use .page__content's scrollTop property for auto scroll. Like below. It uses jQuery for animation.
ons.bootstrap()
.controller('ChatController', function($scope, $timeout){
$scope.messages = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
$timeout(function(){
$('.page__content').animate({scrollTop: $('.ons-list-inner').height()}, 2000)
.animate({scrollTop: 0}, 2000);
});
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>
<ons-navigator page="chat.html"></ons-navigator>
<ons-template id="chat.html">
<ons-page ng-controller="ChatController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Chat</div>
</ons-toolbar>
<ons-list style="margin-top: 10px" scroll-glue>
<ons-list-item class="item" ng-repeat="msg in messages">
<header>
<span class="item-title">{{msg.user}}</span>
</header>
<p class="item-desc">{{msg.msg}}</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>

Resources