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

Sequential JavaScript Operations

What is the most efficient approach for executing sequential operations in JavaScript (specifically with Node.js)? For example, creating a folder - copying a file - editing a file, and so on. Since this is a stand-alone application, it is acceptable to u ...

javascriptnode.jsdesign-patterns

Exploring Scope Inheritance in AngularJS

Within the parent controller scope, I have initialized selectedItem as 'x'. Subsequently, in the child scope, selectedItem is declared using ngModel: <div ng-app> <div ng-controller="CtrlA"> <div ng-controller="CtrlB"> ...

angularjs

Modify the td attributes while retaining the extracted data values from the website

I'm currently utilizing this code to extract data from another website: $searchURL = "http://www.anotherwebsite.com"; $html = file_get_contents($searchURL); $patternform = '/(<tbody.*<\/tbody>)/sm'; preg_match_all($patternfor ...

javascriptphphtmlregex

Breaking down CSV rows and transforming numerical data (Typescript, Javascript)

Looking to convert a row from a csv file into an array and then transform the numeric values from string format. This represents my csv file row: const row = "TEXT,2020-06-04 06:16:34.479 UTC,179,0.629323"; My objective is to create this array (with the ...

javascriptarraystypescriptcsvcsvtoarray

Utilizing various Material UI Sliders on a single page with shared color properties

After creating a component called "SliderBox", I noticed that it returns a div containing a Material UI Slider with createMuiTheme and an input component. The "SliderBox" component utilizes an onHover method on the parent div to change the component' ...

javascriptmaterial-uislider

A guide to monitoring and managing errors in the react-admin dataProvider

Rollbar has been successfully integrated into my react-admin app to track uncaught errors. However, I've noticed that errors thrown by the dataProvider are not being sent to Rollbar. It seems like errors from the dataProvider are internally handled w ...

javascriptreactjsreact-adminbug-trackingrollbar

Ember's distinctive feature: Named Block Helpers

Can we create "named blocks" in a different way? For instance, {{#customBlock "repeatableBlock"}} {{!-- block containing numerous properties and data that may become messy if hardcoded multiple times --}} {{/customBlock}} Then, elsewhere in the code, {{ ...

javascripthtmlember.jshandlebars.js

Develop a list of findings from the search

Is there a way to extract the name from the image shown below? return testData.then((data) => { console.log(data) var results = []; var toSearch = params.suggestTerm; data = data["data"]["0"]; console.log(" ...

javascriptreactjs

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

javascripthtmlreactjstypescript

Dynamic loading of tinymce in progress

When tinymce is loaded in the head and before dom, everything works fine. However, if I attempt to load the JavaScript with ajax using jquery.getScript(), it doesn't work. I initialize tinymce when the user clicks the content area, so the dom must be ...

javascriptajaxtinymce

Adonis 5 and Vue encountering the error message 'E_ROUTE_NOT_FOUND'

I am currently working on a project using Adonis v5 as the backend and Vue 2 as the frontend. I have encountered an issue where, after building the Vue frontend into the public Adonis folder, accessing a specific route directly in the browser results in an ...

javascriptvue.jsvue-routeradonis.js

Looking to tally up the rows in a joined table using Sequelize?

In my current project, I am utilizing the sequelize library to interact with a sqlserver database. The database consists of two tables: data: columns - id, name, team, type history:columns - id, node, date, status, data_id (foreignkey) In terms of their ...

javascriptnode.jssequelize.js

What is a way to merge all the letters from every console.log result together?

I'm encountering an issue - I've been attempting to retrieve a string that provides a link to the current user's profile picture. However, when I use console.log(), the output appears as follows: Console Output: https://i.sstatic.net/70W6Q ...

javascriptangulartypescriptrxjs

express-locale: locales property not functioning as intended

I've been experimenting with using express-locale (v1.0.5) as middleware in my express app to identify the locale based on the browser request. My goal is to compare the identified locale with a list of 'allowed' locales and use a default i ...

javascriptnode.jsexpresslocalization

The transparency level of materials in THREE.js

When using the lambert shader, I encountered an issue with setting the material. In the example provided, it sets the material as follows: this.material.uniforms.emissive.value = new THREE.Color( Math.random(), Math.random(), Math.random()); Prior ...

javascriptthree.jsshaderautodesk-forge

What is the best way to send a JavaScript array to a Perl script using AJAX?

Is it possible to convert a JavaScript array passed via AJAX into a Perl array? Accessing in Perl: @searchType = $cgi->param('searchType'); print @searchType[0]; Result: employee,admin,users,accounts It appears that the first value in the ...

javascriptajaxarraysperl

Display the date that is 3 days after the selected date from the Date Picker in the text field

This is the date picker code I am currently using: var d = new Date(); $(function () { $("#datepicker").datepicker({ minDate: d, dateFormat: 'mm-dd-yy' }); }); I want to enhance this functionality so that when a date is ...

javascriptjquerydate

Using the ng-repeat directive along with the string replace expression allows for dynamically

Struggling to find a way to remove a substring within an angular expression while using the ng-repeat directive. The controller resides in an external JavaScript file, and here is the corresponding HTML code snippet. function myController($scope, $http ...

javascriptjsonangularjsnode.jsexpress

Updating a Json array by including a new property using the Gson library

Using Gson, I am serializing a list of objects in the following manner: String responseMessage = new Gson().toJson(pages.get(pagenumber)); Now, I want to include an additional property that can be accessed in JavaScript, which is not related to the list ...

javascriptjsongson

What is the best way to determine the number of characters that will fit within the width of the document?

I am looking to create a JavaScript function using jQuery that can determine the number of characters that will fit in a single line within the browser window. While I am currently utilizing a monospace font for simplicity's sake, I would like to adap ...

javascriptjquerystring