CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerprogress-bar
Kudos
Kudos

Reputation: 1154

Angular - ng-class - progressbar wizard

So i am working on a multistep wizard in AngularJS. It looks something like this.Multistep wizard

I am using angular ui-router, i have 3 states so when i am on state 1 i want step 1 to be active and if state2 then step1 and step2 should both be active.

I have tried to give each state a class of active if the state.current.name matches the state name.

Here is my code:

Html progress wizard state1

<ul class="progress--bar">
    <li ng-class="{'active' : state.current.name === 'phones'}">Step1</li>
    <li>Step2</li>
    <li>Step3</li>
    <li>Step4</li>
</ul>

Html progress wizard state2

<ul class="progress--bar">
    <li ng-class="{'active' : state.current.name === 'phones' || state.current.name === 'devices'}">Step1</li>
    <li ng-class="{'active' : state.current.name === 'devices'}">Step2</li>
    <li>Step3</li>
    <li>Step4</li>
</ul>

This works but there must be a better way of doing this?

Stateprovider

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

}]);

Controllers

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){
        // console.info('$rootScope.selectedPhone',$rootScope.selectedPhone);
        if(!$rootScope.selectedPhone){
            $rootScope.selectedPhone = PhonesResource.getPhone($stateParams.id);
        }
        // console.info('$rootScope.selectedPhone',$rootScope.selectedPhone);
        $scope.selectedPhone = $rootScope.selectedPhone;

}]);

Any help would be appriciated.

Thanks!

Upvotes: 0

Views: 480

Answers (1)

gos
gos

Reputation: 410

Have you tried to do like this:

<ul class="progress--bar">
   <li ng-class="{'active' : state.current.name === 'phones' || state.current.name === 'devices'}">Step1</li>
   <li ng-class="{'active' : state.current.name === 'devices'}">Step2</li>
   <li>Step3</li>
   <li>Step4</li>

The first li element will have active class when current state is phones or devices

Upvotes: 1

Related Questions