How to make an element active by default in AngularJS

I have designed a custom tabbed section by utilizing the code below:

<div class="row step">
    <div class="col-md-4 arrow active" ui-sref-active="active">
        <a ui-sref="dashboard.create.key_elements" ui-sref-opts="{ reload: true }">
            <span class="number">1</span>
            <span class="h5">Key Elements</span>
        </a>
    </div>
    <div class="col-md-4 arrow" ui-sref-active="active">
        <a ui-sref="dashboard.create.questions" ui-sref-opts="{ reload: true }">
            <span class="number">2</span>
            <span class="h5">Questions</span>
        </a>
    </div>
    <div class="col-md-4 arrow" ui-sref-active="active">
        <a ui-sref="dashboard.create.publish" ui-sref-opts="{ reload: true }">
            <span class="number">3</span>
            <span class="h5">Publish</span>
        </a>
    </div>
</div>

Now, the challenge I'm facing is ensuring that the first element displays with a class of active when the page initially loads. At the moment, it is only applied when an item is clicked. Even manually adding active to the first element doesn't seem to work as expected.

javascriptangularjstabs

Answer №1

The issue lies in the fact that the initial route, dashboard.create.key_elements, is not currently active, prompting ui-router to disable it.

Resolution:

  1. Include an additional class in the CSS, such as "newclassname," to replicate the functionality of the "active" class.

  2. Utilize ng-class for the first element based on a variable in $scope and apply ng-click to the other elements to deactivate them.

JavaScript Solution:

$scope.firstActive = true;
$scope.changeFirst = function() {
      $scope.firstActive = false;
};

UPDATE:

Alternatively, rather than using ng-click, you can pass the variable during route definition. For example, from a snippet of my own code:

.state('ordini', {
            url: '/ordini/:pdv',
            templateUrl: 'ordini/ordini.html',
            controller: 'OrdiniController',
            resolve : {
                CartValue: ['$rootScope', '$stateParams', 'CartService', function($rootScope, $stateParams, CartService){
                    return CartService.getCartValue($rootScope.user.MachCode, $stateParams.pdv);
                }]
            }

Refer to the documentation for more information.

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

Error: Mongoose failed to cast DBrefs value to ObjectId

I am facing an issue with my Team Schema and Match Schema setup. I want the home/away teams in the Match Schema to refer to the Team object. However, I am encountering an error while trying to save the Team. I suspect there might be an issue with the Schem ...

javascriptmongodbmongoose

The webpage is not refreshing or reloading despite using window.location.href

When creating a refreshcart() function, the window.location.href is assigned to currentUrl. However, when making an ajax call in the else block with window.location.href = currentUrl, true; it does not successfully refresh the page. $(document).ready(fu ...

javascriptjqueryajax

Storing user input from Vue.js in a JavaScript array for future use

Utilizing vue.js <template> <input id="email" v-model="email" type="text" placeholder="Email"> <input id="name" v-model="name" type="text" placeholder=" ...

javascripthtmlvue.js

Trouble with installing Enmap due to better-sqlite3 error

For a while now, I've been struggling to get enmap installed. Despite searching the web exhaustively, I haven't come across any solutions that work for me. Every time I try npm i enmap, I consistently encounter this frustrating error: One part o ...

javascriptnode.jsnpm

"Upon inspection, the TrackerReact Container shows that the user's profile.avatar is set, yet the console is indicating that

Within my app, I designed a TrackerReact container named ProfileSettingsContainer. This container retrieves the user data with Meteor.user() and passes it to a function called user(), then sends this information to the ProfileSettings component. The main o ...

javascriptmeteorreactjs

Inspect the data attribute and modify the class

I am looking to determine if a data attribute has a specific value and then update the class associated with it. For example, in my HTML code: <li class="country active" data-country-code="ca"><div class="flag ca"& ...

javascriptjqueryhtml

Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

I am in need of creating a new element at the end of another element. For instance, let's say I have this element: <div id="elmtobetrig">Element that should be followed by another element when the user hits enter after this text. <! ...

javascripthtmlcss

Ajax is transmitting the data, however, PHP is unable to receive it

I am utilizing the power of ajax to transmit data to a php function. My ultimate goal is to exhibit rows of data based on the variable $tweetdate. Below is the snippet of my ajax script: jQuery('#bootstrapModalFullCalendar').fullCalendar({ d ...

javascriptphpjqueryajaxwordpress

Tips for altering objects within an array

I am dealing with an array of objects that looks like this: const items = [ {name: 'Sam', amount: '455gbjsdbf394545', role: 'admin'}, {name: 'Jane', amount: 'iwhru84252nkjnsf', role: 'user'}, ...

javascriptnode.jsreactjs

Only the first element can trigger reactions in jQuery and Ajax!

I am facing an issue on this particular page where I have several forms that can be optionally submitted using ajax. The problem lies in the fact that only the first element selected by jQuery is getting executed! Below is the JavaScript code: $(function ...

javascriptjqueryajaxcoldfusion

Using jqGrid to load additional JSON data after the initial local data has already been populated in the

I encountered a specific issue: I have a compact form with four choices. Users can choose to fill them out or not, and upon clicking 'Ok', a jqGrid is loaded with data based on those selections. To accommodate dynamic column formatting, my servle ...

javascriptjqueryajaxjqgrid

Vue transition unexpectedly ending in the wrong position due to nested transitions

I've encountered an issue while trying to implement a transition on a child div within a 'parent' div that already has its own transition. It seems like the child transition is conflicting with the parent transition, causing it to end up in ...

javascriptvue.jsvuejs2

Using the Parallax Effect in React

I'm currently working on implementing a parallax effect in React and I've encountered an error that's giving me trouble: Below is the snippet of JavaScript code I have for the parallax effect: export const parallax = document.getElementsBy ...

javascriptreactjsparallax

Creating a custom design for legends in Chart.js

I'm currently working on a project using chart.js and I'm trying to customize the label/legend styling for my chart. My goal is to replace the rectangular legend with a circular one. I've come across the suggestion of creating a custom legen ...

javascriptjquerychart.js

Displaying Images on top of Images with React/Javascript/NextJS

I have two images. Let's say image 1 is a thumbnail for news content. I would like to overlay a promotional PNG banner on top of this image and create a new output image. This output image will be used as the OG (Open Graph) image. How can I achieve t ...

javascriptreactjsimagenext.jsfacebook-opengraph

Is there a way to incorporate an array into an array of arrays with jQuery?

I am working with an array shown below: var cString = [ ['1','Techdirt','www.techdirt.com'], ['2','Slashdot','slashdot.org'], ['3','Wired&apos ...

javascriptjqueryarrays

What could be causing the JavaScript/jquery code in my Functions.php file to only function properly on the initial post that loads on my WordPress website?

Currently, I am in the process of developing a WordPress website where the content is refreshed weekly. This means that all posts, media, and files are removed from the WP environment every week and replaced with new content. One of the key components of ...

javascriptphpjqueryajaxwordpress

I am facing an issue with Recharts not occupying the full width in my Nextjs/Reactjs project. Despite setting it to 100% width, it does not behave as

I am currently working with Recharts in combination with Next.js and Tailwindcss. I decided to create my own barchart by copying a code snippet from Recharts, but encountered an issue where changing the height to aspect worked fine, however setting the wid ...

javascripthtmlcssreactjsnext.js

I'm receiving /generate_seeker/?complete_list=true, but what I actually need is /generate_seeker?complete_list=true

Check out this code snippet that utilizes axios in a React project. axios.get(`https://resolab-backend.herokuapp.com/core/create_seeker`,{ params:{ complete_list : true }, headers:{ 'Authorization': `Token ${cookies.get("token")}` } ...

javascriptreactjsaxios

experimenting with adding fresh choices to dropdown menu using ajax and jquery

When attempting to load a list of locations through ajax/jQuery, I encounter an issue. After typing a letter into the input field, the first response is displayed but subsequent responses are simply appended to it. I have tried using .html('') an ...

javascriptjqueryhtmlajaxhtml-select