Skip to main content
All CollectionsTraining and guides
Initializing controls in AngularJS
Initializing controls in AngularJS

You'll find examples for how to initialize a controls with the Mobiscroll AngularJS (1.x) API

Zsombor Deak avatar
Written by Zsombor Deak
Updated over 7 years ago

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

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

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

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

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

    }]);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

What's next?

Did this answer your question?