Angular - ng-class - dynamic progress tracker

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!

Answer №1

Have you attempted to implement it this way:

<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 be assigned the active class if the current state is either phones or devices

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Sequelize, I encountered an error message from SQLite stating that the table does not exist despite having created

I am struggling to grasp the concept of how Sequelize operates and I can't figure out why I am encountering the SQLITE_ERROR: no such table: Users error even though I have created the table using sequelize.define. Here is my code: const { Sequelize, D ...

Leveraging Vue computed properties to update local state without the need for Vuex

I need help with filtering a list of people's scores based on different time periods. Each person has a 'scoreHistory' array containing their scores at various points in time, and I want to see the total score for each person starting from 0 ...

Can someone help me troubleshoot the issue with my submit button's onclick function?

I am currently working on a project where I have a content box enclosed in a div tag. Within this content box, there are paragraphs with unique IDs for individual styling rules. I have set margins, padding, and other styles accordingly. At the bottom of th ...

Is there a way to resolve the scrolling problem on Google Maps?

When using the Google Maps V3 API, an issue arises where zooming out on the map using the scrollbar also causes the page to scroll along with it. This can be quite frustrating and so far I have not been able to find a way to disable this scrolling behavi ...

JavaScript does not support clicking on an iframe

Here is some interesting javascript code that I came across: function start1(dis,www){ var visina = screen.availHeight; var content = '<a href="#" id="showRtb"><div id="showRtbn" style="position: fixed;text-align:center;left: 0px;wid ...

Issue with Angular router failing to load the correct component

As a novice with Angular, I have the following routes set up. app.routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FrameComponent } from './ui/frame/frame.compon ...

put two elements next to each other in a single row

This specific section contains an image positioned at the top, followed by two other components (within <ItemsContainer/>) at the bottom which display as separate rows. I am trying to place these two items (a grid and a chart) side by side within the ...

JavaScript Reactive: Managing subscriptions in flatMap streams

In my current setup, I have a state$ stream that contains messages$s (an array of message streams). As the State$ is updated, new messages$ are added to the array. My goal is to have a subscriber handle messages from all messages$ in a single stream, ensu ...

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

My code changes the navbar colors when I scroll (200ms). However, I would like the changes to occur when I am slightly above the next section, not immediately. In other words, what adjustments should I make to change the color in the next section and not ...

In IE the OnFocus and OnBlur style changes are not functioning properly, while they work successfully in Fire Fox

Greetings everyone, I have defined the following styles in my CSS: .on_focus { background-color:yellow; } .off_focus { background-color:white; } Now, within my form, there is this input field: <label>Last Name</label>< ...

Is it possible to send the value of an array to a client along with a JavaScript file using a read

I have a server set up with node.js that is using node-mysql to extract data and store it in an array called FRUITS. Now, I am looking for a way to pass this array's value (FRUITS) to the client side JavaScript file that I will be sending using &apos ...

Discover the best method for incorporating Vuetify search functionality within a datatable, especially when the column data is in array

I am dealing with a Vuetify data table component that displays an array of items. Within this array, there is another array that I iterate over using a template tag to display the information in just one column. Take a look at the code snippet below: <v ...

Similar route with identical element

Struggling to create a file renderer in the most efficient way possible. The current snippet I have seems quite repetitive: <Routes> <Route path='/explorer' element={<Files>}> <Route path=':root' element={< ...

Combining CodeIgniter4 with Vue.js and Webpack's devServer to handle CORS issues

Exploring Vue & CodeIgniter 4, starting from https://github.com/flavea/ci4-vue. No matter what I try, I encounter a persistent CORS error in dev mode: Access to XMLHttpRequest at 'http://example.com/public/api/book/get' from origin &apo ...

Executing commands following a JSON loop in jQuery

I'm experiencing an issue with jQuery. When my page loads, I fetch a JSON file and loop through its items. However, I am unable to attach any event listeners to the input button that is added. For instance, I want to display an alert message... It s ...

Align the inline text at the center as if it were an inline-block element

Currently working on a design that appears deceptively simple, yet I'm encountering challenges in centering it while keeping the text aligned to the left. https://i.sstatic.net/qhf6p.png In an attempt to have the background span only the actual text ...

Interactive div containing elements that cannot be clicked

http://codepen.io/anon/pen/zxoYBN To demonstrate my issue, I created a small example where there is a link button within a div that toggles another div when clicked. However, I want the link button to not trigger the toggle event and be excluded from the ...

Is there a way to display the description field instead of the Id in a table using pxp-ui?

I am currently working with a table in pxp-ui and have implemented the following column: subsystemId: { type: 'AutoComplete', isSearchable: true, label: 'Subsystem Id', ...

What obstacles must be navigated when transitioning from Angular version 1.0 to Angular version 1.3.2?

My current project involves upgrading an Angular 1.0 application to version 1.3.2. I am curious about the primary changes and new features introduced in this upgraded version. Additionally, I am seeking insights into the major challenges that may arise dur ...

Material-UI web application experiencing crashes due to worn-out cards, resulting in element type being declared as invalid and raising an error

After reviewing numerous similar SO questions, it appears that the issue always comes down to problems with imports. Typically, these involve mistyped import destinations or missing braces, but I have double-checked and found no such issues in my code. ht ...