Switch out the Angular panel with a simple click event

I have developed an angular application using bootstrap. You can view the app on this plunker link

<div class="panel col-lg-3 col-md-3 col-sm-2">
            <div class="" id="menu">

                <div ng-controller="mylistcontroller" class="" id="menu">               
                <br/>
                <h4><font color=#636363>My Academic Programs</font><button id="tooltip1" type="button" class="btn btn-default pull-right" data-toggle="tooltip" data-placement="right" data-original-title="Add a Program"><span class="glyphicon glyphicon-plus-sign pull-right"></span></button></h4>

                <div ng-repeat="prog in programs" class="list-group">

                    <a ng-repeat="list in prog.programstaken" href="#" class="list-group-item">

            {{list.program}}<span class="badge badge-info pull-right">{{list.completed}} / {{list.required}}</span>
            <progressbar class="progress-striped active" max="list.required" value="list.completed" type="{{getProgressType(list)}}">{{getPercentage(list)}}%</progressbar>

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

        </div>

Whenever I click on the + button next to the My Academic Programs, my objective is to have the panel adjacent to it that displays Tier 1-.. replaced with a new panel containing a dropdown menu listing courses from the "programlist" mentioned in the app.js. How should I go about achieving this?

javascriptangularjstwitter-bootstrap

Answer №1

When the plus icon is clicked, a variable is set to control which panel is visible:

ng-click="display.addprogram = true"

Using ng-show, toggle the visibility of the Tier 1-.. panel:

<div ng-show="!display.addprogram" ...> ...

Set up another panel for the dropdown with a different ng-show condition:

<div ng-show="display.addprogram" ...> ...

Add the dropdown inside this panel. The example provided simply toggles the visibility of the two panels. You may want to create a function that performs an action based on the selection and then adjusts the visibility accordingly.

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="p in programs[0].programlist">
      <a ng-click="display.addprogram = false">{{p.program}}</a>
    </li>
  </ul>
</div>

Check out a demo here: http://plnkr.co/edit/gcnuuMUct5ghOkaIX6cF?p=preview

Please note that I combined two controllers into one to make it easier for both to access the display.addprogram variable.

Answer №2

Exploring different angles is essential. A straightforward method involves utilizing either the ng-show or ng-if directives on the HTML elements being adjusted. By setting up ng-click to modify a $scope property linked to ng-show/ng-if, it can trigger a true or false evaluation.

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

Is it possible to replicate the functionality of "npm run x" without including a "scripts" entry?

If you want to run a node command within the "context" of your installed node_modules, one way to do it is by adding an entry in the scripts field of your package.json. For example: ... "scripts": { "test": "mocha --recursive test/**/*.js --compiler ...

javascriptnode.jsnpmcommand-line-interface

ng-repeat is not functioning properly despite the presence of data

Currently, I am in the process of building a basic Website using the MEAN stack, but I'm facing an issue with an ng-repeat that is failing to display any content. Oddly enough, when I attempt something similar in another project, it works perfectly fi ...

javascripthtmlangularjs

Troubleshooting Media Queries in HTML, CSS, Bootstrap: Why Aren't They Applying as Expected?

I am still fairly new to web programming and just starting out with bootstrap. After creating a section of my page that worked well on larger screens, I realized it wasn't responsive enough on smaller devices. The height was set at 400px, causing hor ...

jqueryhtmlcsstwitter-bootstrap

obtaining attribute values from chosen items in a multiselect dropdown menu

I am using jQuery to create a multi-select element. For instance, consider the following example: <select multiple id="multiple"> <option value="1" type="Alice">Option 1</option> <option value="2" type="Bob">Option 2</o ...

javascriptjqueryhtml-selectmulti-select

How to effectively merge DefaultTheme with styled-components in TypeScript?

I am facing an issue with integrating a module developed using styled-components that exports a theme. I want to merge this exported theme with the theme of my application. In my attempt in theme.ts, I have done the following: import { theme as idCheckThe ...

javascriptreactjstypescriptstyled-componentstsx

Can the warning about a missing dependency in useEffect be incorrect at times?

After using hooks for some time, I still don't quite grasp why React insists on including certain dependencies in my useEffect that I don't want. My understanding of the 'dependencies' in a useEffect hook is as follows: You should add ...

javascriptreactjsreact-hooksuse-effect

Angular 8 does not allow for the assignment of type '{}' to a parameter

I have a unique approach for managing errors: private handleErrors<T>(operation = 'operation', result?: T) { return (error: any): Observable<T> => { console.error(error); this.record(`${operation} failed: ${error.m ...

javascriptangulartypescriptangular8

Prevent the opening of tabs in selenium using Node.js

Currently, I am using the selenium webdriver for node.js and loading an extension. The loading of the extension goes smoothly; however, when I run my project, it directs to the desired page but immediately the extension opens a new tab with a message (Than ...

javascriptnode.jsseleniumselenium-webdriverselenium-chromedriver

Organize JSON data in Angular 6 from an observable based on a specific key

Note: While I am familiar with sorting a regular array of objects using .sort(), I am facing a challenge with an observable object that I am not accustomed to. My task involves retrieving a JSON array of objects with a service: import { Injectable } from ...

javascriptangulartypescriptrxjsobservable

The React Component in Next.js does not come equipped with CSS Module functionality

I have been attempting to incorporate and apply CSS styles from a module to a React component, but the styles are not being applied, and the CSS is not being included at all. Here is the current code snippet: ./components/Toolbar.tsx import styles from & ...

javascriptcssnode.jstypescriptnext.js

Utilizing AngularJS watchCollection to monitor changes in scope variables alongside an array

Within my controller, I have several scope variables: $scope.searchText = "abc"; $scope.currentPage ="1"; $scope.sortBy ="dateTime"; $scope.sortOrder="reverse"; $scope.columnSettings = [ {"name": "dateTime", ...

angularjs

What is the best way to remove an element from an array and add a new one?

Here is the array that I am working with: [ { "id": "z12", "val": "lu", "val2": "1", }, { "id": "z13", "val": "la", "val2" ...

javascripttypescriptlodash

The path aligns with the route, yet the component designated for that route fails to render

I wrote a React component named Workout that looks like this: const Workout = props => { console.log(props); return ( <div> <h1>hello</h1> </div> ); }; export default Workout; Next, I imported this componen ...

javascriptreactjsreact-router-v4

Exploring the best way to use $set in Mongoose for dynamically updating an embedded

I'm currently attempting to create a unique function that can update the value of a specific embedded MongoDB document within an array. The goal is to change the value based on its position. function removeAddress(accountNum, pos) { const remove ...

javascriptnode.jsmongodbmongoose

Having trouble retrieving text from an HTML form in Node.js using express, as the req.body object is coming up

Having trouble extracting text from an HTML form to build a basic text to speech functionality. Despite using an express server, the req.body is consistently empty when attempting to fetch the text. I've experimented with body-parser and adjusted the ...

javascripthtmlnode.jsexpress

React Type Mutation response feedback is a valuable tool for receiving input

I am facing an issue with passing the mutation success response in my code. I have a file named change-email.tsx which calls a component file updateEmail.tsx containing a mutation function. The submit function is working fine, but I cannot figure out how t ...

javascriptreactjstypescriptreact-native

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

My Password Validation Dilemma I'm in the process of developing a password field that can assess the strength of the input provided. In a different response, I came across a regex that I could utilize to validate whether the input meets specific crit ...

javascriptreactjsformikyup

Issue with the camera functionality in phonegap 3.3.0 API on IOS platform

I am currently in the process of developing an application for iPad that will allow users to capture and store photos. I have encountered some difficulties while using the PhoneGap camera API library, as my code is not generating any errors which makes i ...

javascriptioshtmlcordovacamera

Steps to finish (refresh) a mongoDB record

Currently, I am dealing with the following scenario: An API request from one service is creating multiple MongoDB documents in a single collection. For example: [ {_id: 1, test1: 2, test: 3}, {_id: 2, test1: 3, test: 4} ] Subsequently, a second service ...

javascriptmongodbapinpm

Incorporating a JavaScript workflow into Django

Currently, I am following a tutorial on integrating a modern JavaScript pipeline into my Django application. The objective is to have the JavaScript code write "Hello webpack" onto the page, but unfortunately, it is not displaying as expected. Since I alr ...

javascriptdjangowebpack