utilizing angularjs and bootstrap to manage multiple button models

Recently delved into learning angularjs and bootstrap. Found a tutorial on creating buttons.

<div ng-controller="ButtonsCtrl">
    <h4>Checkbox</h4>
    <pre>{{checkModel}}</pre>
    <div>
        <button type="button" class="btn btn-primary" ng-click="checkModel.KateSpade = true" btn-checkbox>Kate Spade</label>
        <button type="button" class="btn btn-primary" ng-model="checkModel.LouisVuitton" btn-checkbox>Louis Vuitton</label>
        <button type="button" class="btn btn-primary" ng-model="checkModel.Burberry" btn-checkbox>Burberry</label>
        <button type="button" class="btn btn-primary" ng-model="checkModel.CalvinKlien" btn-checkbox>Calvin Klien</label>
        <button type="button" class="btn btn-primary" ng-model="checkModel.Forever21" btn-checkbox>Forever 21</label>
    </div>
</div>

Any tips on how to update the values of ng-model upon clicking? My controller setup seems pretty standard.

app.controller('ButtonsCtrl', function($scope){
    console.log("ButtonsCtrl has initiated");

    $scope.checkModel = {
        KateSpade: false,
        LouisVuitton: true,
        Burberry: false,
        CalvinKlien: false,
        Forever21: false
    };
});

Answer №1

It appears that the angular bootstrap UI website utilizes labels in their HTML structure. It seems like there are some errors in your code. You have an opening button tag and a closing label tag, which is not correct. Additionally, your first button uses ng-click instead of ng-model. Here is a corrected version of the HTML:

<div class="btn-group">
    <label class="btn btn-primary" ng-model="checkModel.KateSpade" btn-checkbox>Kate Spade</label>
    <label class="btn btn-primary" ng-model="checkModel.LouisVuitton" btn-checkbox>LouisVuitton</label>
    <label class="btn btn-primary" ng-model="checkModel.Burberry" btn-checkbox>Burberry</label>
    <label class="btn btn-primary" ng-model="checkModel.CalvinKlien" btn-checkbox>Calvin Klien</label>
    <label class="btn btn-primary" ng-model="checkModel.Forever21" btn-checkbox>Forever 21</label>
</div>

Don't forget to include and require the 'ui.bootstrap' module in your project. Check out this Fiddle link for more details.

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

`WebAuthn API allows for easy identification of fingerprints``

Google introduced WebAuthn https://developers.google.com/web/updates/2018/05/webauthn two years back. Is it possible to accurately identify the finger that a user registered or verified? For instance, the server could not only obtain the public key but a ...

How can I execute JavaScript within a for loop in the server-side code?

protected void Button1_Click(object sender, EventArgs e) { for (int i = 0; i < 100; i++) { Page.ClientScript.RegisterClientScriptBlock(GetType(), "myScript", "<script>alert('hello world');</script>"); } } Is th ...

Utilizing jQuery to dynamically update background colors within an ASP repeater based on the selected value of a dropdown list

On my asp.net web page, I have a repeater that displays a table with various fields in each row. I am trying to make it so that when the value of a dropdown within a repeater row changes, the entire row is highlighted in color. While I have achieved this s ...

User information in the realm of website creation

Can someone provide insight on where user data such as photos, videos, and posts is stored? I doubt it is saved in an SQL database or any similar system. ...

Click to open a Swipeable Drawer using an onClick event handler in Material UI

Issue Encountered: Currently, in the provided documentation code (https://codesandbox.io/s/cnvp4i?file=/demo.tsx), the drawer opens when the "Open" button is clicked at the top. However, I am looking to have the drawer triggered and opened when it is direc ...

What is the best way to ensure that empty strings are not included in the length of my array?

I have encountered an issue with a JSON file that I fetch. The array syllables is capable of holding up to strings max. However, when I exclude 2 words, I end up with 2 words and 2 empty strings. Nevertheless, my front-end still expects 4 "strings". So, it ...

How can I show the total sum of input values in a React.js input box?

Is there a way to dynamically display the sum of values entered in front of my label that updates automatically? For example, you can refer to the image linked below for the desired output Output Image I have initialized the state but I'm struggling ...

Tips for creating ternary operator logic that account for numerous conditions and optional parameters:

Trying to create a logic for my validator functions that involves using objects as errorMaps for input validation. In the code snippet provided, args.drugName is an optional field. If the user provides text, we want to ensure it is greater than 3 letters; ...

Is there a way to turn off the auto-complete feature for JavaScript keywords in HTML within JSX in WebStorm?

While using WebStorm, I've noticed that it automatically completes JavaScript keywords as I type regular text in JSX. This behavior is starting to frustrate me because I have to constantly press ESC or click elsewhere to hide the auto-complete popup. ...

Transforming JSON data from JavaScript to Python JSON format

I am working with JavaScript JSON data: var data = '{a: 10, b: 20}' Now I need to convert this into Python JSON. Any suggestions on how to achieve this? Current Scenario: I have a script that extracts text from a website. The data on the webs ...

Show the user's chosen name in place of their actual identity during a chat

I'm facing an issue where I want to show the user's friendly name in a conversation, but it looks like the Message resource only returns the identity string as the message author. I attempted to retrieve the conversation participants, generate a ...

Having difficulties testing the functionality of redux-form

I am struggling with testing react components that use redux-form. My integration tests are failing, indicating that I have not set up the tests correctly. There seems to be a consensus in discussions on this issue, both here and on GitHub. Any assistance ...

Uploading an image using ajax with multer

When using Multer to upload an image file to my Node server, I keep getting 'undefined' when trying to use ajax to send the image. Ajax : image = $("#input-file-img").val() const data = new FormData(); data.appe ...

Tips for preventing breaks in typography

I have implemented a material ui Typography component, but it's causing a line break even though there is enough space. Here is the code snippet: <Box flexDirection="row"> <Typography> Gender: <RadioGroup row ...

activating a jQuery function and sending a parameter

Looking for some help with JavaScript - I'm having trouble getting this code to work. I need to trigger a predefined function from one script within my AJAX script. Specifically, I want to activate the qtip functionality on the content of a div that i ...

Strategies for extracting methods and refactoring to a separate file for better reusability

Still relatively new to the JQuery/javascript realm, I've put together a functional jqgrid with a datepicker and custom control (using jquery auto complete) by piecing together code samples I came across online. This code has been added to a T4 templa ...

Retrieve no data from Firebase using Cloud Functions

I am a beginner with Google Firebase and Cloud Functions, and I recently attempted a basic "hello world" program: Established a connection to Cloud Firestore [beta], which contains over 100,000 records. Retrieved the top record from the database. Below ...

Preserve the content in the text box corresponding to the selected radio button

In my form, there are multiple radio buttons, each with an associated text box value. Users can only select one radio button at a time and submit the form. However, sometimes users will enter data in a textbox for one radio button, then switch to another o ...

Angular facing problems with tracking comment counts in Disqus

After successfully setting up the Disqus comments system on my Angular website following the guide at , everything was working fine. However, when attempting to add the Disqus comment count system to my homepage using the code provided at , I encountered a ...

Leverage D3 force simulation as a functional programming tool

Currently, I am utilizing d3-force for collision detection in my project: function customLayout(nodesWithCoordinates) { const simulation = forceSimulation(nodesWithCoordinates) .force('collide', forceCollide(4.5)) .stop() .tick(300 ...