mobiscroll.settings = {
lang: ' ',
theme: ' ',
themeVariant: ' '
};
angular
.module('demoApp', ['mobiscroll-listview', 'mobiscroll-form', 'mobiscroll-navigation', 'mobiscroll-cards'])
.controller('demoController', ['$scope', function ($scope) {
$scope.selectedTab = 'profile';
$scope.selectedUser = null;
$scope.setUser = function (newIndex) {
$scope.selectedUser = $scope.data[newIndex];
$scope.updateInputs();
}
$scope.formatDate = function (date) {
return mobiscroll.util.datetime.formatDate('D, d h:ii A', new Date(date));
}
$scope.getData = function () {
mobiscroll.util.getJson('https://trial.mobiscroll.com/master-detail/', function (data) {
$scope.$apply(function () {
$scope.data = data;
$scope.selectedUser = data[0];
});
$scope.updateInputs();
}, 'jsonp');
}
$scope.updateInputs = function () {
var inputs = document.getElementsByClassName('md-profile-data');
var event = new Event('change');
inputs[1].dispatchEvent(event);
for (var i = 0; i < inputs.length; i++) {
inputs[i].dispatchEvent(event);
}
}
$scope.people = [
{ id: 0, name: 'Ashlee Conner', selected: true },
{ id: 1, name: 'Bianca Baker', selected: false },
{ id: 2, name: 'Christopher Tran', selected: false },
{ id: 3, name: 'Konner Stone', selected: false },
{ id: 4, name: 'Leon Medina', selected: false },
{ id: 5, name: 'Nora Leonard', selected: false },
{ id: 6, name: 'Octavio Daniels', selected: false },
{ id: 7, name: 'Russell Wang', selected: false },
{ id: 8, name: 'Teresa Livingston', selected: false },
{ id: 9, name: 'Zoe Gilbert', selected: false }
];
$scope.navSettings = {
display: 'inline'
};
$scope.listSettings = {
select: 'single'
};
$scope.getData();
}]);
<div ng-app="demoApp" ng-controller="demoController">
<div mobiscroll-form class="md-master-detail-demo">
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-2 mbsc-col-sm-3">
<ul mobiscroll-listview="listSettings" mobiscroll-data="people" class="mbsc-cloak">
<li data-selected="{{item.selected}}" ng-click="setUser($index)">{{item.name}}</li>
</ul>
</div>
<div class="mbsc-col-12 mbsc-col-md-10 mbsc-col-sm-9 md-col-border">
<ul mobiscroll-tab-nav="navSettings" class="mbsc-cloak">
<li data-selected="true" ng-click="selectedTab = 'profile'">Profile</li>
<li ng-click="selectedTab = 'conv'">Conversations</li>
<li ng-click="selectedTab = 'tasks'">Tasks</li>
</ul>
<div ng-if="selectedUser && selectedTab == 'profile'" class="mbsc-form-grid">
<mobiscroll-card>
<mobiscroll-card-content>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<label>
First name
<input mbsc-input class="md-profile-data" ng-model="selectedUser.first" data-input-style="box" data-label-style="floating" />
</label>
</div>
<div class="mbsc-col-md-6 mbsc-col-12">
<label>
Last name
<input mbsc-input class="md-profile-data" ng-model="selectedUser.last" data-input-style="box" data-label-style="floating" />
</label>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<label>
Email
<input mbsc-input class="md-profile-data" ng-model="selectedUser.email" data-input-style="box" data-label-style="floating" />
</label>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<label>
Company
<input mbsc-input class="md-profile-data" ng-model="selectedUser.company" data-input-style="box" data-label-style="floating" />
</label>
</div>
<div class="mbsc-col-md-6 mbsc-col-12">
<label>
Role
<select ng-model="selectedUser.role" mbsc-dropdown data-input-style="box" data-label-style="floating">
<option value="ceo">CEO</option>
<option value="cto">CTO</option>
<option value="vpp">VP of Product</option>
<option value="vpm">VP of Marketing</option>
<option value="vpe">VP of Engineering</option>
</select>
</label>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<label>
Notes
<textarea mbsc-textarea class="md-profile-data" data-input-style="box" data-label-style="floating" ng-model="selectedUser.notes"></textarea>
</label>
</div>
</div>
<div class="mbsc-row mbsc-justify-content-end">
<div class="mbsc-col-md-6 mbsc-col-12">
<div class="mbsc-pull-right mbsc-btn-group">
<button mbsc-button class="mbsc-btn-primary">Update</button>
<button mbsc-button class="mbsc-btn-secondary">Email</button>
<button mbsc-button class="mbsc-btn-secondary">Call</button>
<button mbsc-button class="mbsc-btn-secondary">Meet</button>
</div>
</div>
</div>
</mobiscroll-card-content>
</mobiscroll-card>
</div>
<div ng-if="selectedUser && selectedTab == 'conv'" class="mbsc-form-grid">
<div ng-repeat="conv in selectedUser.conv">
<mobiscroll-card data-collapsible data-open>
<mobiscroll-card-header>
<span class="mbsc-bold">{{conv.title}}</span>
<span class="mbsc-pull-right mbsc-card-subtitle">{{formatDate(conv.date)}}</span>
</mobiscroll-card-header>
<mobiscroll-card-content>{{conv.text}}</mobiscroll-card-content>
</mobiscroll-card>
</div>
</div>
<div ng-if="selectedUser && selectedTab == 'tasks'" class="mbsc-form-grid">
<mobiscroll-card>
<mobiscroll-card-header>
<h2 class="mbsc-card-title">Qualification process with lead</h2>
</mobiscroll-card-header>
<mobiscroll-card-content class="mbsc-no-padding">
<label>
Understanding business problem we can fix.
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[0]">
</label>
<label>
How are they solving the problem at the moment?
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[1]">
</label>
<label>
Do you have a budget allocated to solve this problem?
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[2]">
</label>
<label>
Understanding the budget signoff process.
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[3]">
</label>
<label>
What other solutions are you evaluating?
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[4]">
</label>
<label>
What does success look like?
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[5]">
</label>
<label>
What does solving the problem mean to you personally?
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[6]">
</label>
<label>
What's the deadline?
<input mbsc-checkbox type="checkbox" ng-model="selectedUser.tasks[7]">
</label>
</mobiscroll-card-content>
</mobiscroll-card>
</div>
</div>
</div>
</div>
</div>
</div>
.demo-main-cont.demo-comp-listview { padding: 0; }
.demo-comp-listview .demo-note { margin: 10px; }
.md-master-detail-demo,
.md-master-detail-demo .mbsc-row {
height: 100%;
}
.md-master-detail-demo .mbsc-grid {
height: 100%;
}
.md-master-detail-demo .md-col-border {
overflow: auto;
height: 100%;
min-height: 800px;
border-left: 1px solid #ccc;
}
.md-master-detail-demo .mbsc-ms-c {
border-top: 0;
}
.md-master-tab,
.md-master-item {
display: none;
}
.md-master-tab-sel,
.md-master-item-sel {
display: block;
}