Increase the number of button groups when clicked

I have a button group with three buttons: left, middle, and right. I want to enhance this functionality so that when any of the main buttons are clicked, the corresponding sub-buttons (left-sub, middle-sub, or right-sub) appear accordingly:

<div class="btn-group">
    <label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
    <label class="btn btn-primary" ng-model="checkModel.left-sub" btn-checkbox>Left-Sub</label>
    <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
    <label class="btn btn-primary" ng-model="checkModel.middle-sub" btn-checkbox>Middle-Sub</label>
    <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
    <label class="btn btn-primary" ng-model="checkModel.right-sub" btn-checkbox>Right-Sub</label>
    <label class="btn btn-primary" ng-model="checkModel.right-sub-2" btn-checkbox>Right-Sub-2</label>
</div>

I'm new to angularJS and struggling to implement this feature. Any sample code or guidance would be greatly appreciated.

javascriptangularjsangularjs-ng-repeatangular-uiangular-ui-bootstrap

Answer №1

To start, you will need to update the ng-model names because they are not valid with a hyphen (-) in the key names.

After that, simply utilize ngIf:

<label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
    <!--This label will be shown if checkModel.right is true (meaning the Right button is checked)-->
    <label class="btn btn-primary" ng-model="checkModel.rightSub" btn-checkbox ng-if="checkModel.right">Right-Sub</label>
    <!--This label will be shown if checkModel.rightSub is true (indicating the Right-Sub button is checked)-->
    <label class="btn btn-primary" ng-model="checkModel.rightSub2" btn-checkbox ng-if="checkModel.rightSub">Right-Sub-2</label>

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

Unable to retrieve image

I want to save a Discord user's profile picture on Replit, but even though it downloads successfully, the image is not displaying. Here is the code I am using: const request = require('request') const fs = require('fs') app.get(&qu ...

javascriptexpressdiscordreplit

What is the best way to determine if an item in an array is not empty?

Let's consider an array: arr = [{}, {}, {}, {}] If we want to determine the length of the array by counting only objects that contain at least one property, we can do this: [{}, {name: "Manchester United", odds: 3}, {}, {}] // 1 [{}, {name: "Liver ...

javascriptarraysjson

When attempting to send data to the ServiceStack RESTful service, an error message of 'Access is denied' was received

I created a RESTful service using ServiceStack to send data to a database. It worked perfectly when tested locally. However, after deploying it to a server and running the same jQuery $.ajax call code, I encountered an 'Access is denied' error. I ...

javascriptjqueryajaxrestservicestack

Can you explain the distinction between key and id in a React component?

I have included this code snippet in the parent component. <RefreshSelect isMulti cacheOptions id='a' key = 'a' components={makeAnimated()} options={th ...

javascriptreactjs

Troubleshooting: Custom AngularJS directive not responding to ng-click event

I recently developed a custom directive, and while the controls defined in the templates are working smoothly, I encountered an issue. I needed to add an additional control - an image button, based on a certain condition. To achieve this, I utilized an IF ...

angularjsappendangularjs-ng-click

Using Angular's ng-repeat alongside a bootstrap input checkbox, make sure to incorporate a dynamic ng-model and utilize ng-

This particular issue is proving to be a bit challenging for me to articulate, but I'll give it my best shot. I'm currently working on implementing Angular checkboxes with their ng-true-value attribute in conjunction with a dynamic ng-model. < ...

javascriptangularjstwitter-bootstrapcheckbox

unable to locate the PHP file on the server

Struggling to make an API call via POST method to retrieve data from a PHP file. Surprisingly, the code functions properly on another device without any hiccups. However, every time I attempt to initiate the call, I encounter this inconvenient error messag ...

javascriptphpjqueryajaxxampp

What could be causing the lack of responsiveness on this page?

I have created a webpage with over 1100 lines of code using JSF 2.0. The page is filled with PrimeFaces components and I have implemented JQuery to control the appearance and disappearance of these components. The webpage functions smoothly on Firefox 4.0 ...

javascriptfirefoxjsf-2primefaces

Measuring the quantity of 'table' elements with jQuery

This HTML code below defines a table structure. Now tables can be dynamically added to this structure. <div class="tableStyle myWebsiteTable"> <table cellspacing="0" cellpadding="0" id="site0" class="site active"> <thead> ...

javascriptjqueryhtmlcssjquery-plugins

Deactivate the submission button when there are no search results in typeahead.js

How can I disable the submit button if there are no search results found? The form should not be submitted in this scenario. I am currently using typeahead.js for my code. $('.typeahead').typeahead(null, { name: 'suburb', disp ...

javascriptjquerytypeahead.js

Having trouble accessing the text in a paragraph using JavaScript executor and web driver

On a particular website, there is: <p id="tempid" value="Manual Effect">testing the test</p> String value = (String)((JavascriptExecutor) this).executeScript("return window.document.getElementById('tempid').value"); System.out.pr ...

javajavascriptseleniumselenium-rc

Tips for setting up Nginx with Node.js on a Windows operating system

I am looking to set up Nginx on my Windows machine in order to run two node applications. Can anyone provide guidance on how to accomplish this? I have attempted to download Nginx 1.6.3, but have had trouble finding instructions specifically for running i ...

javascriptnode.jsnginx

Scheduled Job unable to complete post request

(I am completely new to the world of JavaScript, node.js, and Heroku so I apologize in advance if my question is not very clear) I recently set up a Heroku node.js application with a scheduled task that should run every hour. The task does run as expecte ...

javascriptnode.jsherokuscheduled-tasks

SignalR 2.2 users are experiencing a lack of message reception

I have developed a unique self-hosted SignalR application that is operating within the framework of a console application. To access the hubs within this application, I have implemented a wrapper class to avoid referencing the SignalR.Core assemblies direc ...

javascriptc#signalr

Employing Angular.js $http.post in conjunction with Codeigniter WITH CSRF protection activated

Seeking help with Angular.js and CodeIgniter integration in an application with CSRF protection. In jQuery, adding the token is straightforward: $.ajaxSetup({ data: { csrf_token: $("input:hidden[name='csrf_token']").val() } In Angular.js, a ...

ajaxcodeigniterangularjscsrf

Modifying information in a single array in Vue JS has a ripple effect on

I'm really struggling to understand what the ... want with this Vue component! Can someone please help me out? Here is my code: var groupadding = new Vue({ el: '#groupAdd', data:{ currentFullData: [], localData: [] }, method ...

javascriptvue.js

Submit Button Field - HTML ButtonFor

Being relatively new to MVC Razor and web development, both front-end and back-end, I'm in need of a button that can send a stored value to the controller/model. I attempted to mimic the functionality of Html.TextBoxFor by giving it attributes similar ...

javascriptc#jqueryhtmlrazor

Increment field(s) conditionally while also performing an upsert operation in MongoDB

I need to perform an insert/update operation (upsert) on a document. In the snippet below, there is a syntactical error, but this is what I am attempting to achieve: $inc: { {type=="profileCompletion"?"profileCompletion":"matchNotification"}: 1}, If the ...

javascriptnode.jsmongodbexpressmongoose

Which is better: using multiple makeStyles or just one in Material UI?

Uncertain about the best approach in this situation. Is it acceptable to generate styles using makeStyles for each component individually, or would it be better to create one in the base component and simply pass down class names? ...

javascriptcssreactjsmaterial-ui

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

I'm currently working on a Whatsapp-style navigation bar and facing an issue with the sticky navbar functionality. https://i.stack.imgur.com/Cy3lA.gif Please refer to the details below for more information. To resolve this issue, I have included ...

javascripthtmlcss