Display or conceal nested divs within ng-repeat loop

I set up a div with sub divs to establish a nested grid system. There are three levels altogether:

  1. MainDiv - Always Visible
  2. SecondDiv - Display or conceal when MainDiv is clicked on

  3. ThirdDiv - Display or conceal when SecondDiv is clicked on

    <div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
    <div class="row">
        <div class="col col-75" >
            Department / Product Type
        </div>
        <div class="col col-25">
            Qty
        </div>
    </div>

    <div ng-repeat="item in departments | orderBy:'-qty'" style="padding:0px;margin: 0;">
        <div class="row" ng-class-odd="'odd'" ng-class-even="'even'">
            <div class="col col-75" style="padding:0;margin:0;">
                {{item.departmentName}} - {{item.productTypeName}} - Click here for more details
            </div>
            <div class="col col-25" align="center" valign="middle" style="font-size: 14px;font-weight:bold;padding:0;margin:0;">
                {{item.qty}}
            </div>
        </div>
        <div ng-repeat="style in item.styles" style="padding:0;margin: 0;">
            <div class="row">
                <div class="col" style="margin-left: 5% !important;border-top-width:0;border-bottom-width:0;">
                    {{style.styleNum}} ({{style.qty}}) - Click here for more details
                </div>
            </div>
            <div class="row" ng-attr-id="{{ 'level-2-' + $index }}">
                <div class="col col-5" style="border:0"></div>
                <div class="col col-5" style="border-left:0;border-bottom:0;border-right:0;"></div>
                <div class="col col-25">Color</div>
                <div class="col col-25">Size</div>
                <div class="col">Product#</div>
            </div>
            <div ng-repeat="styleLine in style.details">
                <div class="row">
                    <div class="col col-10" style="border:0;"></div>
                    <div class="col col-25">{{styleLine.color}}</div>
                    <div class="col col-25">{{styleLine.size}}</div>
                    <div class="col">{{styleLine.productNum}}</div>
                </div>
            </div>

        </div>
    </div>
</div>

Now I want to include a click event on the div to toggle the display of the necessary nested divs.

Plunker: http://plnkr.co/z3RiV6cDFC6YjrbuqxN9

javascriptcssangularjsionic-framework

Answer №1

Illustrative demonstration of utilizing ng-init and ng-click:

<div ng-repeat="item in collection" ng-init="display = false">
    <div ng-click="display = !display"></div>
    <div ng-repeat="subitem in item.children" ng-show="display">
        <p>Greetings Earthlings!</p>
    </div>
</div>

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

The latest bug fix and update in Bootstrap 4.5.2 now includes an updated version of Popper.js. Make sure to use the

Hello fellow developers, I am currently working with npm bootstrap version 4.5.2 and above. However, I am facing an issue with the compatibility of @popperjs/core. If anyone can assist me in resolving the bootstrap.js error temporarily, specifically re ...

javascriptcssnode.jspopperjs

How can I retrieve the values of jQuery select2 tag list in ASP.NET?

I am looking to retrieve the selected values from the jQuery Select2 plugin in my ASP.NET code behind. Below is a snippet of my code: Client Side: <select id="ddlcountry" runat="server" class="select" style="width: 100%;"> ...

javascriptjqueryasp.net

Execute JavaScript using "matches" without the need for the page to refresh

I have been developing a school project which involves creating a Chrome extension to streamline the Checkout process on a website. In my manifest.json file, I specified that a content.js file should run when it matches a specific URL. "content_script ...

javascriptgoogle-chrome-extension

The presence of ng-show dynamically adjusts the minimum height of a div element

I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content. ...

javascripthtmlcssangularjs

Tips for displaying a specific array in react JS using the map function

Hello everyone, I am currently working on creating a hotel webpage using React.js and I'm focusing on developing the facilities page. My goal is to display the description of the facilities based on the button that the user clicks. How can I achieve t ...

javascriptreactjsreact-bootstrap

Why should <template> be used in Vuetify?

Exploring the possibilities of Vuetify 2.0 in my current project has led me to dive into the v-stepper component, designed for displaying progress through numbered steps. In the example provided in the playground, I noticed the use of the <template> ...

javascripthtmlvue.jsvuetify.js

Guide on transmitting JSON data from an AngularJS client to a backend server

Seeking guidance on creating a form in Angular that can send answers as JSON to a MySQL database connected with Django backend and gcloud. Any recommended projects or helpful documentation for this type of implementation? Currently, accounts are created b ...

angularjsdjango

Utilize the csv-parser module to exclusively extract the headers from a file

Recently, I've been exploring the NPM package csv-parser which is designed to parse CSV files into JSON format. The example provided demonstrates how you can read a CSV file row by row using the following code snippet: fs.createReadStream('data.c ...

javascriptnode.jscsvcsv-parser

Switch the color of the final letter

Sample code snippet: <p class="test">string</p> Looking to dynamically change the color of the last letter, specifically the letter "g", using CSS only, without relying on JavaScript. I am displaying the string character by character and nee ...

htmlcss

Putting off the jQuery UI autocomplete focus event

Currently, I am utilizing an autocomplete feature from version 1.8.23 of the jQuery UI library. Here is a snippet of my code: $(this).autocomplete({ autoFocus: true, minLength: 2, delay: 100, source: function(request, response) ...

javascriptjqueryajaxjquery-uiautocomplete

How can I retrieve information from PHP using json_encode and access it in JavaScript?

Currently in the process of developing a web app using Phonegap and XUI. Fetching data from an external domain through an http request with XUI. The retrieval process is successful, as I am able to receive JSON data in the following format: ({"first":"J ...

phpjavascriptajaxjsonxui

Issue with series of node commands getting stuck on npx command

I have a custom node script that I use to automate the setup of my application. This script creates directories, generates files, and executes a series of node commands. Everything functions correctly for the most part. The specific commands being executed ...

javascriptnode.jsnpm

Angular2 Error: Issue with the "match" function in JavaScript

Why am I receiving a typeerror that says "cannot read property of 'match' undefined"? var numInput = document.getElementById('input'); // Listen for input event on numInput. numInput.addEventListener('input', function(){ ...

javascriptangulartypescript

In React, the entire component refreshes every time the modal is opened

<ThemeProvider theme={theme}> <GlobalStyle /> {componentName !== 'questionaire' && componentName !== 'activityResult' && <CardWrapper />} <ErrorModal ...

javascripthtmlreactjs

Customize the appearance of each element in ng-repeat individually

In my code, I have implemented an ng-repeat. Each alternate div inside the ng-repeat is supposed to have a different border-color, which is achieved by using the following structure: <div ng-repeat="channel in channelList"> <div ng-style="get ...

javascriptangularjsangularjs-ng-repeatangularjs-digest

Advancement of a grunt chore within a digital platform

After constructing an app with grunt, I am now in the process of developing a web interface using node and angular to interact with this app. One feature I have implemented is a button that triggers a grunt task using childProcess in NodeJS: child_process ...

javascriptangularjsnode.jsgruntjs

How can I dynamically assign ngModel in AngularJS?

I've created a directive with an isolate scope that maps a list of objects to inputs for modifying a specific property. However, I now aim to make this component more universal by allowing it to bind to deeply nested properties within each object. Fo ...

javascriptangularjs

What is the reason for the regeneration of the 2D array?

I have a method called generateWeights() that retrieves random values in an array; And a method named learn() that calls the changeWeights() method to alter the values in the array. Expected: Prior to invoking the learn() method, I anticipate receiving an ...

javascriptarraysangulartypescript

Preventing data loss in an Ionic array - encountering issues with using this.array.push

When attempting to use the storage get method to fill the array storedArr = [], I encounter the error message .push is not a function: storedArr = this.storage.get('stored') ? this.storage.get('stored').then((e) => {e}) : []; The c ...

arraysangulartypescriptionic-frameworkstorage

What is causing the unexpected behavior of deferred.resolve in the q manual?

I can't seem to grasp this concept and it might be a silly question. Let's analyze the code snippet below: function throwError() { throw Error("can't touch this."); } var def = q.defer(); def.promise.then( function() { co ...

javascriptnode.jsq