Tips for making a dropdown menu within an Ionic Side menu

Looking for guidance on creating a sub menu in the ionic framework? I'm new to AngularJS and ionic framework, but eager to learn. Below is the code snippet I used to create a dropdown list component:

<ion-side-menu side="left">
    <ion-content class="has-expanded-header">
        <ion-list>
            <ion-item nav-clear menu-close class="item-icon-left" ui-sref="main.dashboard">
                <i class="icon ion-ios-speedometer"> </i>
                    Dashboard
            </ion-item>
            <ion-item nav-clear menu-close class="item-icon-left item-icon-right" ui-sref="main.accounts">
                <i class="icon ion-accounts ion-ios-arrow-right"> </i>
                    Accounts
            </ion-item>
            <ion-item nav-clear menu-close class="item-icon-left" ui-sref="main.accounts">
                <i class="icon ion-accounts"> </i>
                    Sub Accounts 1
            </ion-item>
            <ion-item nav-clear menu-close class="item-icon-left" ui-sref="main.accounts">
                <i class="icon ion-accounts"> </i>
                    Sub Accounts 2
            </ion-item>
        </ion-list>   
    </ion-content>
</ion-side-menus>
javascriptangularjsionic-framework

Answer №1

Here is an example of HTML code: 

<ion-list>
        <div ng-repeat="group in groups">
          <ion-item class="item-stable"
                    ng-click="toggleGroup(group)"
                    ng-class="{active: isGroupShown(group)}">
              <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
            &nbsp;
            Group {{group.name}}
          </ion-item>
          <ion-item class="item-accordion"
                    ng-repeat="item in group.items"
                    ng-show="isGroupShown(group)">
            {{item}}
          </ion-item>
        </div>
      </ion-list>

And here is some controller code:

 $scope.groups = [];
  for (var i=0; i<10; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j=0; j<3; j++) {
      $scope.groups[i].items.push(i + '-' + j);
    }
  }

  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };

I hope this snippet proves to be helpful for you :)

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

Nuxt js - Components are replicated on SSR pages

I have created a static page containing various components. When I navigate to this page from another page, everything displays correctly. However, when I directly land on the page, some components are duplicated and rendered again after the footer. Upon i ...

javascriptvue.jsnuxt.js

Swapping out the standard if/else logic for try/catch error

I'm facing a challenge in removing the then statements from this code snippet and replacing all catches with try/catch statements. I'm struggling to figure out how to handle the then statements. export class WelcomePageContribution implements IW ...

javascripttypescriptasynchronoustry-catch

Solving filtering issues within React using a combination of conditions

I've been struggling to selectively remove an item from my array. The current filter I'm using is removing too much. Here is the array in question: [ { "domain": "domain1.com", "slug": "moni ...

javascriptreactjsfilterfiltering

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

I'm currently working on generating a bar stack graph using the chart.js JavaScript library. My JavaScript array contains the following data: 0: {labels: "01/01/2020 00:00:00", data: 7433, category: "A"} 1: {labels: "01/01/2020 00:00:00", data: 774, ...

javascriptajax

Node.js NPM Google search results showing [ Object object ] instead of actual result

searchOnGoogle: function(searchQuery){ googleSearch.query({ q: searchQuery }, function(error, response) { console.log(response); botChat.send ...

javascriptnode.jsnpm

Leveraging TipTap.dev for building a joint editing platform -

I have integrated the collaboration feature from tiptap.dev into my NextJS application. Initially, I used their CLI command for the Hocuspocus server which worked well on port 1234 locally and synchronized text editing across browsers seamlessly. However, ...

javascriptreactjsexpressnext.jswebsocket

A guide to implementing a dynamic limit in ng-repeat using AngularJS

I'm looking to dynamically set a limit in my ng-repeat. The goal is to limit the number of items displayed to 1 when the window width is less than 750px. Below is the function in my controller: $scope.$watch('window.innerWidth', function() ...

arraysangularjsangularjs-ng-repeat

Using jQuery to iterate through JSON data obtained from a web service

In this code snippet, I am attempting to retrieve a JSON response from a PHP page and then iterate through it to display the name field of each JSON object. However, for some reason, nothing is being alerted out. <html> <head> <title>A ...

javascriptjqueryjson

Encountering a TypeError while attempting to construct and launch an IOS simulator through Cordova

Currently, I am in the process of developing an Ionic app that is designed for cross-platform functionality. Encountering an Error when attempting to build and run an IOS simulator using Cordova TypeError [ERR_INVALID_ARG_TYPE]: The "code" argum ...

javascriptiosangularcordovaionic-framework

Issue with h2 tag within JQuery's read more feature

How can I modify my jQuery code to wrap the middle text in an h2 tag? I am currently using a code snippet from code-tricks. You can find the original code snippets here: $(document).ready(function() { var showChar = 100; var ellipsestext = "..."; ...

javascriptjqueryhtmlcss

Sending a parameter to a request-promise function within an iteration through a forEach loop

I have successfully implemented an API call for price data. However, I am facing an issue while trying to pass the variable exchange_pair_id into the then() function. Within the forEach loop, the exchange_pair_id is accurate for each asset. But inside the ...

javascriptnode.jsforeach

Attempting to increase a variable by 1, only to find that it appears to be doubling on its own

As I work on developing a quiz, I encounter an issue with my code. When I click on the question_holder div, variable x seems to be doubling instead of incrementing as expected. The value of x is supposed to increase by one each time, but it appears to ski ...

javascriptjquery

c# simulating button click through injected JavaScript

Greetings, I'm seeking assistance in replicating a specific button click on a website. Here is the code for the button: <button type="button" class="btn btn-link btn-xs" onclick="getComponents('188855', '5a0f44a9d70380.12406536&apo ...

javascriptc#htmljavascript-injection

The Typescript compiler will continue to generate JavaScript code even if there are compilation errors

As a fresh learner of TypeScript, I have been experimenting with some basic concepts. Below is the code from my file app1.ts: class Monster { constructor(name, initialPosition) { this.name = name; this.initialPosition = initialPosition ...

javascripttypescript

Tips for effectively invoking a method in a Vue component

As a Vue2 beginner, I am currently working with the Vue CLI and following the structure generated from it. My goal is to submit form data, but I keep encountering a warning and error: [Vue warn]: Property or method "onSubmit" is not defined on the insta ...

javascriptformsvue.js

Is it possible to set a click event or <A> link on an entire Ember component?

One of my Ember components has a tagName:'li' This is how the template appears: <div> title</div> <div> image </div> <div> text </div> The result is <li> blocks consisting of the elements above, displ ...

javascriptcssember.jscomponentsdom-events

Issue with socket.io: Server unable to emit event to client upon connection

I'm struggling with my basic socket.io setup as I can't seem to get my server to send a message once the connection is established. Upon establishing a connection to my server, I want it to automatically send a message back to the client. Here&a ...

javascriptnode.jssocketssocket.io

Navigate to a new tab with a parameter in AngularJS

Is there a way to open a new tab using state.go with parameters? This is the state configuration: .state("view", { url: "/view", templateUrl: 'app/components/view/view.html', controller: 'viewController', params: { ...

javascriptangularjsangular-ui-router

What is the method for inserting the document URL into a text input?

Can someone provide guidance on grabbing the top URL and inserting it into a text input field? I've tried the following method, but it's not working. Any suggestions or ideas? Additionally, is there a way to make this text input field uneditable? ...

javascripthtmlformsurl

Error: Material-UI X is unable to locate the data grid context

Utilizing the Data Grid Pro feature from Material-UI in my React application. I attempted to craft a personalized toolbar for the DataGridPro component by incorporating the GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, and ...

javascriptreactjsdatagridmaterial-ui