AngularJS and TypeScript can be used to create a dropdown that is triggered by clicking on

Looking to trigger the dropdown opening when a link is clicked using AngularJS. My approach was to use the ng-class directive to add the 'open' class to the dropdown, but it doesn't seem to be working.

I have two dropdown menus, and what I want is for the second one to open when the link in the first one is clicked.

<ul class="nav navbar-nav navbar-right " >
         <li class="dropdown" ng-class="myDropdown ? : 'open'">
             <a  class="dropdown-toggle" data-toggle="dropdown" >Menu</a>
                <ul class="dropdown-menu " role="menu" ng-if="!myDropdown">
                   <li>
                      <a href="" ng-click="toogleDropDown()">Open second dropdown</a>
                    </li>
                </ul>
                <ul  class="dropdown-menu " role="menu" ng-if="myDropdown">
                   <li >
                      <a href="" ng-click="toogleDropDown()">Go back</a>
                    </li>
                </ul>
          </li>
    </ul>

Typescript

function toogleDropDown() {
        this.scope.myDropdown = true;
    }

Answer №1

It seems that the toggleDropDown function is not returning anything, which means your line of code might be causing issues:

<a href="" ng-click="!toogleDropDown()">Go back</a>

Essentially, this is like writing:

<a href="" ng-click="true">Go back</a>

You can simplify it by using this approach instead:

  <a href="" ng-click="myDropdown=!myDropdown">
               <span ng-if="!myDropdown">Open second dropdown</span>
               <span ng-if="myDropdown">Go back</span>
            </a>

There's no need for that unnecessary function in your controller.

Also, if you intended to use ng-class, it should be set up like this:

<li class="dropdown" ng-class="{'open': myDropdown}">

Check out this example on fiddle: https://jsfiddle.net/pegla/nq11093m/1/

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

Mastering the art of managing forms within a React functional component

Within my React functional component written in Typescript, I have implemented a form-like structure with various input fields and a submit button. <input type="text" id="firstName" placeholder={t('enter_last_name')} /> ...

Typescript mapping data structure

Currently, I am facing the challenge of mapping complex models. My data consists of an array of Carts with attributes such as id and name. In addition, there is a dictionary where each key represents a type and its corresponding value includes different p ...

Navigating Angular 2: Managing HTTP Updates Before Proceeding

My issue revolves around a service utilizing an http Post method saveItem(item: Item): Observable<number> { return this.http .post(`${this.baseUrl}/items`, item.createJson(), this.getHeaders()) .map(this.getIdFromItem) .catch(this.ha ...

How can one break down enum values in typescript?

I've defined an enum in TypeScript as shown below: export enum XMPPElementName { state = "state", presence = "presence", iq = "iq", unreadCount = "uc", otherUserUnreadCount = "ouc", sequenc ...

Building an Ionic app from a .git repository on your local machine: A step-by-step guide

Trying to set up Moodle's ionic mobile app on my local machine using Windows and following these steps: cd project-directory ionic platform add android Encountered an error in the command prompt: throw err; ^ Error: Cannot find module ' ...

Tips for utilizing angular ui.layout in column mode: Implementing a bottom-aligned element

Recently, I began utilizing angular ui-layout to enable pane splitting within a user interface. I am attempting to design a sidebar that features a blue element at the bottom. Is there a way to manipulate the ui-layout directive to accomplish this? I exp ...

Is it possible to execute a script from a different directory?

Currently, I am developing a nodejs package that involves executing a bash script within the program. The specific bash script, "./helpers/script.sh", needs to be run using a relative path. This means that when users install and run the package, the script ...

Stop ngOnChanges from being triggered after dispatching event (Angular 2+)

In Angular 2+, a custom two-way binding technique can be achieved by utilizing @Input and @Output parameters. For instance, if there is a need for a child component to communicate with an external plugin, the following approach can be taken: export class ...

What is the reason that a generic type which extends an interface cannot be assigned to a corresponding object?

I encountered the following error message [ts] Type '{ type: string; }' is not assignable to type 'A'. when using this code snippet interface Action { type: string; } function requestEntities<A extends Action>(type: string ...

AngularJS utilizes @Input to retrieve the variable name

Currently, I am working on transitioning my AngularJS application to Angular. I have a few components with bindings that need to be converted to Angular. AngularJS Code: <my-comp test="test.data" otherData="test.otherData"><my-comp> my-comp ...

Using AngularJS to extract values from deeply nested JSON structures

I'm currently navigating through a nested JSON object and I'm facing challenges in accessing the sub items within it. Below is a snippet of the JSON file I'm working with. It has successfully passed the JSONLint test, so it should be in pro ...

The function is not being executed when using $scope.$apply()

I am in need of a customized click directive that can execute the passed code using scope.$apply(). $(elem).on('click', function(){ scope.$apply(attrs.wdClick); }); Everything works smoothly when I pass something like wd-click="something = ...

Attribute specified does not belong to type 'DetailedHTMLProps<ButtonHTMLAttributes

I am working on creating a reusable 'button' component and I would like to include a href attribute so that when the button is clicked, it navigates to another page. An Issue Occurred: The following error was encountered: 'The type '{ ...

Add fresh HTML elements within the ng-repeat loop

I'm struggling to insert new HTML code in the middle of an ng-repeat loop. I've tried using append but it doesn't seem to work. Here is a snippet of my code: <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/aja ...

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Seeking the optimal solution for creating PDF templates using Angular and .NET 6? Specifically looking to design templates that heavily feature tables. In my exploration of efficient PDF template creation with Angular and .NET 6, I ventured into using pdf ...

Store a function as a variable in AngularJS

My goal is to dynamically call a function based on a variable that holds the function name. For instance: var fun =function1(1,2) Then later, fun could be assigned another function: fun= function2(2,3) This is just an example to illustrate my situation ...

Navigating within two containers using the anchorScroll feature in AngularJS

I am trying to create a page with two columns of fixed height. The content in each column is generated using ng-repeat directive. Is it possible to implement scrolling within each column to a specific id using AngularJS? Code <div> Scroll to a p ...

Setting up shortcuts for webpack using lerna and typescript

I have set up a repository to showcase an issue I am facing: https://github.com/vileen/lerna-webpack-typescript-aliases-issue (the app does not start properly, but that's not the main concern). The main question here is how can I enhance importing fr ...

showing errors in case the username does not match the specified pattern

As I work with symfony, one of the challenges is displaying errors when the username does not fit the specified pattern. How can this be achieved? {{ form_widget(form.username, {'attr':{'pattern': '[a-zA-Z]*'} }) }} ...

How can I implement a progress bar for file uploads in AngularJS when a button is

Currently, I am experimenting with image upload functionality that includes an image preview feature. My goal is to display a progress bar when the user clicks the upload button and show the upload status on the progress bar using Angular. Can anyone provi ...