jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

Wizard to controllerAs

pull/3/head
smartapant 2015-12-30 19:27:39 +03:00
parent 1d42fc99e1
commit dee9e105b6
4 changed files with 80 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/pages/form/form.module.js
View File

@ -23,7 +23,8 @@
{ {
url: '/form-wizard', url: '/form-wizard',
templateUrl: 'app/pages/form/wizard/wizardPage.html', templateUrl: 'app/pages/form/wizard/wizardPage.html',
controller: 'WizardCtrl' controller: 'WizardCtrl',
controllerAs: 'vm'
}) })
} }

8
src/app/pages/form/wizard/wizard.html
View File

@ -1,7 +1,7 @@
<div class="wizard"> <div class="wizard">
<div class="row"> <div class="row">
<div class="wizard-navigation-container"> <div class="wizard-navigation-container">
<div ng-repeat="t in tabs" class="wizard-navigation {{tabNum == $index ? 'active' : ''}}" ng-click="selectTab($index)"> <div ng-repeat="t in $baWizardController.tabs" class="wizard-navigation {{$baWizardController.tabNum == $index ? 'active' : ''}}" ng-click="$baWizardController.selectTab($index)">
{{t.title}} {{t.title}}
</div> </div>
</div> </div>
@ -10,7 +10,7 @@
<div class="progress progress-wizard"> <div class="progress progress-wizard">
<div class="progress-bar progress-bar-info active" role="progressbar" <div class="progress-bar progress-bar-info active" role="progressbar"
aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}"> aria-valuenow="{{$baWizardController.progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
</div> </div>
</div> </div>
@ -18,8 +18,8 @@
<nav> <nav>
<ul class="pager wizard-pager"> <ul class="pager wizard-pager">
<li class="previous"><button ng-disabled="isFirstTab()" ng-click="previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li> <li class="previous"><button ng-disabled="$baWizardController.isFirstTab()" ng-click="$baWizardController.previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
<li class="next"> <button ng-disabled="isLastTab()" ng-click="nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li> <li class="next"> <button ng-disabled="$baWizardController.isLastTab()" ng-click="$baWizardController.nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
</ul> </ul>
</nav> </nav>
</div> </div>

12
src/app/pages/form/wizard/wizardPage.html
View File

@ -5,14 +5,14 @@
<blur-panel title="Form Wizard" class-container="with-scroll"> <blur-panel title="Form Wizard" class-container="with-scroll">
<ba-wizard> <ba-wizard>
<ba-wizard-tab title="Personal info"> <ba-wizard-tab title="Personal info">
<form> <form name="vm.personalInfoForm" novalidate>
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required max="5">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="exampleInputPassword1">Password</label> <label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label class="custom-checkbox"> <label class="custom-checkbox">
@ -24,6 +24,7 @@
</form> </form>
</ba-wizard-tab> </ba-wizard-tab>
<ba-wizard-tab title="Product Info"> <ba-wizard-tab title="Product Info">
<form name="productInfoForm" novalidate>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
@ -52,10 +53,11 @@
</div> </div>
</div> </div>
</div> </div>
</form>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</ba-wizard-tab> </ba-wizard-tab>
<ba-wizard-tab title="Payment"> <ba-wizard-tab title="Payment">
<form class="row form-inline"> <form class="row form-inline" name="paymentForm" novalidate>
<div class="form-group col-sm-3 col-xs-6"> <div class="form-group col-sm-3 col-xs-6">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Name"> <input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
</div> </div>
@ -72,7 +74,7 @@
</form> </form>
</ba-wizard-tab> </ba-wizard-tab>
<ba-wizard-tab title="Finish"> <ba-wizard-tab title="Finish">
<form class="form-horizontal"> <form class="form-horizontal" name="finishForm" novalidate>
<div class="form-group"> <div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label> <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">

108
src/app/pages/form/wizard/wizrdCtrl.js
View File

@ -8,96 +8,59 @@
/** @ngInject */ /** @ngInject */
function WizardCtrl($scope, $location, $sce) { function WizardCtrl($scope, $location, $sce) {
$scope.tabs = [ var vm = this;
{ setTimeout(function (evt, isValid) {
name: 'Step 1' console.log(vm.personalInfoForm);
}, $scope.formValid = isValid;
{ }, 1000);
name: 'Step 2' $scope.bla= 'Ctrl'
},
{
name: 'Step 3'
}];
$scope.$watch('tab', countProgress);
$scope.selectTab = function (tab) {
$scope.tab = tab;
};
$scope.isSelectedTab = function (tab) {
return $scope.tab === tab;
};
$scope.isFirstTab = function () {
return $scope.tab == 0;
};
$scope.isLastTab = function () {
return $scope.tab == $scope.tabs.length - 1 ;
};
$scope.nextTab = function () {
$scope.tab++;
};
$scope.previousTab = function () {
$scope.tab--;
};
function countProgress() {
$scope.progress = (($scope.tab + 1) / $scope.tabs.length) * 100;
}
$scope.tab = 0;
$scope.progress = 0;
} }
function baWizard() { function baWizard() {
return { return {
restrict: 'E', restrict: 'E',
transclude: true, transclude: true,
scope: {},
templateUrl: 'app/pages/form/wizard/wizard.html', templateUrl: 'app/pages/form/wizard/wizard.html',
controllerAs: '$baWizardController',
controller: ['$scope', function ($scope) { controller: ['$scope', function ($scope) {
var vm = this; var vm = this;
$scope.tabs = []; vm.tabs = [];
$scope.tabNum = 0; vm.tabNum = 0;
$scope.progress = 0; vm.progress = 0;
vm.addTab = function(tab) { vm.addTab = function(tab) {
$scope.tabs.push(tab); vm.tabs.push(tab);
$scope.selectTab(0); vm.selectTab(0);
}; };
$scope.$watch('tabNum', countProgress); $scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress);
$scope.selectTab = function (tabNum) { vm.selectTab = function (tabNum) {
$scope.tabNum = tabNum; vm.tabNum = tabNum;
$scope.tabs.forEach(function (t, tIndex) { vm.tabs.forEach(function (t, tIndex) {
tIndex == $scope.tabNum ? t.select(true) : t.select(false); tIndex == vm.tabNum ? t.select(true) : t.select(false);
}); });
}; };
$scope.isFirstTab = function () { vm.isFirstTab = function () {
return $scope.tabNum == 0; return vm.tabNum == 0;
}; };
$scope.isLastTab = function () { vm.isLastTab = function () {
return $scope.tabNum == $scope.tabs.length - 1 ; return vm.tabNum == vm.tabs.length - 1 ;
}; };
$scope.nextTab = function () { vm.nextTab = function () {
$scope.tabNum++; vm.tabNum++;
}; };
$scope.previousTab = function () { vm.previousTab = function () {
$scope.tabNum--; vm.tabNum--;
}; };
function countProgress() { function countProgress() {
$scope.progress = (($scope.tabNum + 1) / $scope.tabs.length) * 100; vm.progress = ((vm.tabNum + 1) / vm.tabs.length) * 100;
} }
}] }]
} }
@ -107,21 +70,26 @@
return { return {
restrict: 'E', restrict: 'E',
transclude: true, transclude: true,
scope: {
title: '@'
},
require: '^baWizard', require: '^baWizard',
scope: {
availability: '='
},
templateUrl: 'app/pages/form/wizard/tab.html', templateUrl: 'app/pages/form/wizard/tab.html',
link: function($scope, $element, $attrs, wizard) { link: function($scope, $element, $attrs, wizard) {
$scope.selected = false; $scope.selected = true;
$scope.select = function(isSelected) {
function select(isSelected) {
if (isSelected) { if (isSelected) {
$scope.selected = true; $scope.selected = true;
} else { } else {
$scope.selected = false; $scope.selected = false;
} }
} ; }
wizard.addTab($scope);
wizard.addTab({
title: $attrs.title,
select: select
});
} }
}; };
} }