You can use the Mobiscroll AngularJS API in your Angular 1.x and Angular based apps - like Ionic 1.
Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML & JS snippets) that you can grab and try locally.
Calendar
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="mycalendar" mobiscroll-calendar="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-calendar'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Calendar.
Color
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="mycolor" mobiscroll-color="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-color'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Color.
Date & Time
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="mydatetime" mobiscroll-datetime="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-datetime'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Date & TIme.
Event Calendar
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="myeventcalendar" mobiscroll-eventcalendar="settings">
</div>
JS
angular.module('myModule',['mobiscroll-eventcalendar'])
.controller('myController', ['$scope', function ($scope) {
$scope.myeventcalendar = [
{ d: new Date(2013, 10, 13), text: 'My Big Event' },
{ d: '12/25', text: 'Christmas' }
];
}]);View demos and other examples for the Event Calendar.
Forms
HTML
<div ng-app="demoApp" ng-controller="demoController">
<div mobiscroll-form="settings">
<label>
Username
<input name="username" ng-model="username">
</label>
<label>
Password
<input name="password" ng-model="password" type="password">
</label>
<button type="submit">Sign In</button>
</div>
</div>
JS
angular
.module('demoApp', ['mobiscroll-form'])
.controller('demoController', ['$scope', function ($scope) {
$scope.settings = {
theme: 'mobiscroll'
};
}]);
View demos and other examples for the Forms.
Image
HTML
<div ng-app="demoApp" ng-controller="demoController">
<ul mobiscroll-image="settings" mobiscroll-instance="demo" ng-model="selected" style="display:none">
<li ng-repeat="item in data" data-val="{{item.value}}" data-icon="{{item.icon}}">
<p>{{item.text}}</p>
</li>
</ul>
</div>
JS
angular
.module('demoApp', ['mobiscroll-image'])
.controller('demoController', ['$scope', function ($scope) {
$scope.data = [{
value: 'Share',
icon: 'share',
text: 'Share'
}, {
value: 'Delete',
icon: 'remove',
text: 'Delete'
}];
$scope.settings = {
enhance: true
};
}]);
View demos and other examples for the Image.
Listview
HTML
<div ng-app="demoApp" ng-controller="demoController">
<ul mobiscroll-listview="settings" mobiscroll-data="data" style="display:none">
<li>{{item.name}}</li>
</<ul>
</<div>
JS
angular
.module('demoApp', ['mobiscroll-listview'])
.controller('demoController', ['$scope', function ($scope) {
$scope.data = [
{ name: 'Apples' },
{ name: 'Cakes' },
{ name: 'Bottles of Juice' }
];
}]);
View demos and other examples for the Listview.
Measurement
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="myTemperature" mobiscroll-temperature="settings"/>
</div>
JS
angular
.module('demoApp', ['mobiscroll-measurement'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Measurement.
Menustrip
HTML
<div ng-app="myModule" ng-controller="myController">
<ul ng-model="mymenustrip" mobiscroll-menustrip="settings">
<li data-icon="connection">Wi-Fi</li>
<li data-icon="location">Location</li>
<li data-selected="true" data-icon="volume-medium">Sound</li>
</ul>
<div/>
JS
angular
.module('myModule',['mobiscroll-menustrip'])
.controller('myController', ['$scope', function ($scope) {}]);
View demos and other examples for the Menustrip.
Number
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="mynumber" mobiscroll-number="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-number'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Number.
Numpad
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="mynumpad" mobiscroll-numpad="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-numpad'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Numpad.
Range
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="myrange" mobiscroll-range="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-range'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Range.
Rating
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="myrating" mobiscroll-rating="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-rating'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Rating.
Scroller
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="myscroller" mobiscroll-scroller="settings">
</div>
JS
angular
.module('myModule', ['mobiscroll-scroller'])
.controller('myController', ['$scope', function ($scope) {
$scope.settings = {
showLabel: true,
wheels: [
[{
label: 'First wheel',
data: ['0', '1', '2', '3', '4', '5', '6', '7']
}, {
label: 'Second wheel',
data: [{
value: 0,
display: 'a'
}, {
value: 1,
display: 'b'
}, {
value: 2,
display: 'c'
}, {
value: 3,
display: 'd'
}]
}]
]
};
}]);
View demos and other examples for the Scroller.
Select
HTML
<div ng-app="demoApp" ng-controller="demoController">
<select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo">
<option value="1">Berlin</option>
<option value="2">London</option>
<option value="3">New York</option>
<option value="4">Paris</option>
</select>
</div>
JS
angular.module('myModule',['mobiscroll-select'])
.controller('myController', ['$scope', function ($scope) {}]);View demos and other examples for the Select.
Timer
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="mytimer" mobiscroll-timer="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-timer'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Timer.
Timespan
HTML
<div ng-app="demoApp" ng-controller="demoController">
<input ng-model="mytimespan" mobiscroll-timespan="settings">
</div>
JS
angular
.module('demoApp', ['mobiscroll-timespan'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Timespan.
Treelist
HTML
<div ng-app="myModule" ng-controller="myController">
<ul mobiscroll-list="settings" ng-model="mylist">
<li>America
<ul>
<li>Mexico</li>
<li>Brasil</li>
</ul>
</li>
<li>Europe
<ul>
<li>Germany</li>
<li>France</li>
<li>Italy</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
</ul>
</li>
</ul>
</div>
JS
angular
.module('myModule',['mobiscroll-list'])
.controller('myController', ['$scope', function ($scope) {}]);
View demos and other examples for the Treelist.
Widget
HTML
<div ng-app="demoApp" ng-controller="demoController">
<div ng-model="mywidget" mobiscroll-widget="settings" mobiscroll-instance="demo" style="display: none;">
<h3 class="md-text-center">Hi</h3>
<p class="md-text-center">Are you feeling good today?</p>
</div>
<button ng-click="demo.show()">How are you feeling?</button>
</div>
JS
angular
.module('demoApp', ['mobiscroll-widget'])
.controller('demoController', ['$scope', function ($scope) {}]);
View demos and other examples for the Widget.
What's next?
For customization options and API settings browse the Mobiscroll for Angular JS docs.