I am currently developing a multi-step wizard in AngularJS that consists of three states. Each state should correspond to specific steps being active in the wizard. I have attempted to achieve this by assigning a class of 'active' to each step based on the current state name.
Here is an example of my code:
HTML progress wizard for state 1
<ul class="progress--bar">
<li ng-class="{'active': state.current.name === 'phones'}">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
HTML progress wizard for state 2
<ul class="progress--bar">
<li ng-class="{'active': state.current.name === 'phones' || state.current.name === 'devices'}">Step 1</li>
<li ng-class="{'active': state.current.name === 'devices'}">Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
Although this method works, I am curious if there is a more efficient way to accomplish this task?
StateProvider Setup
app.config(['$urlRouterProvider', '$stateProvider','$httpProvider',
function($urlRouterProvider, $stateProvider, $httpProvider) {
$urlRouterProvider.otherwise('/phones');
$stateProvider
.state('phones', {
url: '/phones',
cache: false,
templateUrl: '/frontstart/studentfix/angular/templates/phones-tpl.html',
controller: 'phonesCtrl'
})
.state('devices', {
url: '/phones/devices/:phonesId',
cache: false,
templateUrl: '/frontstart/studentfix/angular/templates/device-tpl.html',
controller: 'deviceCtrl'
})
.state('details', {
url: '/phones/devices/details/:id',
cache: false,
templateUrl: '/frontstart/studentfix/angular/templates/device-detail-tpl.html',
controller: 'deviceDetailCtrl'
});
}]);
Controller Definitions
app.controller('phonesCtrl', ['$scope','$rootScope', '$state','$stateParams','PhonesResource',
function($scope, $rootScope, $state, $stateParams, PhonesResource){
$rootScope.state = $state;
$scope.phoneCompanies = PhonesResource.all();
$scope.selectDevice = function (id) {
$state.go('devices', { phonesId: id });
};
}]);
app.controller('deviceCtrl', ['$scope','$state','$stateParams','PhonesResource', '$rootScope',
function($scope, $state, $stateParams, PhonesResource, $rootScope){
$scope.phoneCompanies = PhonesResource.all();
$scope.phoneCompanies = PhonesResource.get($stateParams.phonesId);
$scope.showDetails = function (selectedPhone) {
$rootScope.selectedPhone = selectedPhone;
$state.go('details',{id: selectedPhone.id});
};
}]);
app.controller('deviceDetailCtrl', ['$scope','$state','$stateParams','PhonesResource', '$rootScope',
function($scope, $state, $stateParams, PhonesResource, $rootScope){
if(!$rootScope.selectedPhone){
$rootScope.selectedPhone = PhonesResource.getPhone($stateParams.id);
}
$scope.selectedPhone = $rootScope.selectedPhone;
}]);
Any suggestions or assistance would be greatly appreciated!
Thank you!