All Collections
Training and guides
Initializing controls in Ionic 1
Initializing controls in Ionic 1

You'll find examples for how to initialize controls with the Mobiscroll for AngularJS API in an Ionic app

Gabi Nagy avatar
Written by Gabi Nagy
Updated over a week ago

For examples in a plain Angular JS app see this other article.

Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML and JS snippets) that you can grab and try locally.

Calendar

HTML

<label class="item item-input">
    <span class="input-label">Calendar</span>
    <input type="text" ng-model="myCalendar" mobiscroll-calendar="{ theme: 'ios', display: 'bottom' }">
</label>

Color

HTML

<label class="item item-input">
    <span class="input-label">Color</span>
    <input type="text" ng-model="myColor" mobiscroll-color="{ theme: 'ios', display: 'bottom' }">
</label>

Date & Time

HTML

<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" ng-model="selectedDate" mobiscroll-date="{ theme: 'ios', display: 'bottom' }">
</label>

Event Calendar

HTML

<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" mobiscroll-data="events" ng-model="myEventcalendar" mobiscroll-eventcalendar="{ theme: 'ios', display: 'bottom' }">
</label>

JS

angular.module('myModule',['mobiscroll-eventcalendar'])
    .controller('myController', ['$scope', function ($scope) {
        $scope.events = [
            { d: new Date(2013, 10, 13), text: 'My Big Event' },
            { d: '12/25', text: 'Christmas' }
        ];
    }]);

Forms

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

Image

HTML

<div ng-app="demoApp" ng-controller="demoController">
    <ul mobiscroll-image 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
        };
    }]);

Listview

HTML

<div ng-app="demoApp" ng-controller="demoController">
    <ul mobiscroll-listview 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' }
        ];
    }]);

Measurement

HTML

<label class="item item-input">
    <span class="input-label">Measurement</span>
    <input type="text" ng-model="myMeasurement" mobiscroll-measurement="{ theme: 'ios', display: 'bottom' }">
</label>

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/>

Number

HTML

<label class="item item-input">
    <span class="input-label">Number</span>
    <input type="text" ng-model="myNumber" mobiscroll-number="{ theme: 'ios', display: 'bottom' }">
</label>

Numpad

HTML

<label class="item item-input">
    <span class="input-label">Numpad</span>
    <input type="text" ng-model="myNumpad" mobiscroll-numpad="{ theme: 'ios', display: 'bottom' }">
</label>

Range

HTML

<label class="item item-input">
    <span class="input-label">Range</span>
    <input type="text" ng-model="myRange" mobiscroll-range="{ theme: 'ios', display: 'bottom' }">
</label>

Rating

HTML

<label class="item item-input">
    <span class="input-label">Rating</span>
    <input type="text" ng-model="myRating" mobiscroll-rating="{ theme: 'ios', display: 'bottom' }">
</label>

Scroller

HTML

<label class="item item-input">
    <span class="input-label">Scroller</span>
    <input type="text" ng-model="myScroller" mobiscroll-scroller="settings">
</label>

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'
                }]
            }]
        ]
    };
}]);

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>

Timer

HTML

<label class="item item-input">
    <span class="input-label">Timer</span>
    <input type="text" ng-model="Timer" mobiscroll-timer="{ theme: 'ios', display: 'bottom' }">
</label>

Timespan

HTML

<label class="item item-input">
    <span class="input-label">Timespan</span>
    <input type="text" ng-model="Timespan" mobiscroll-timespan="{ theme: 'ios', display: 'bottom' }">
</label>

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>

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>

What's next?

Did this answer your question?