Getting Checkbox values selected by the user with ng-model in AngularJS

Having some trouble implementing Checkbox functionality, I'm having difficulty determining which checkboxes the user has selected. How can this be achieved? Here's a look at my HTML snippet:

<td>
                <table border="0"><th>Tier</th>
                <tr ng-repeat="item in tiertype">             
                    <td>
                    <label class="checkbox" for="{{item.id}}">
                    <input type="checkbox" ng-model="selection.ids[item.id]" name="tier_class" ng-checked="item.checked" id="{{item.id}}"/>{{item.name}}
                    </label>
                    </td></tr></table>
            </td>

And here is my javascript snippet:

$scope.tiertype = [ 
                       { id: 1, name: "All", checked: true}, 
                       { id: 2, name: "Standard", checked: false },
                       { id: 3, name: "Unreserved", checked: false },
                       { id: 3, name: "Reserved", checked: false },
                       { id: 4, name: "General", checked: false }
                       ];

When using "check box value= {{selection.ids}}", I'm not receiving the correct values. Furthermore, when checking any checkbox, they all seem to get checked or only the checkbox with id:1 (default). It's puzzling to me and I'm struggling to understand where I'm making mistakes since I have limited experience with AngularJS.

Answer №1

To indicate the status of a checkbox, simply assign the ng-model attribute to the boolean value that defines its checked state. For example: ng-model="item.checked"

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

Attaching a click event to an input field

Seeking to serve html files from the server without relying on template engines. Below is the script used to start the server. // script.js const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(expr ...

How can I trigger a function after all nested subscriptions are completed in typescript/rxjs?

So I need to create a new user and then create two different entities upon success. The process looks like this. this.userRepository.saveAsNew(user).subscribe((user: User) => { user.addEntity1(Entity1).subscribe((entity1: EntityClass) => {}, ...

Invoke the API and display the data once the states have been successfully updated

Upon initialization, the code checks the current role of the user. If the role is admin, the setAdmin(true) function is called to set the state of admin to true. By default, the admin state is set to false. When the component is rendered, it initially di ...

Understanding the concept of inertia within the OrbitControls feature of ThreeJS

I have implemented THREE.OrbitControls to rotate my objects in a project. Yet, I am interested in incorporating some inertia for the camera rotation so that it gradually comes to a stop after the user stops moving the mouse. What would be the best approa ...

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

Unable to alter state from the onClick event of a dialog button

In the process of developing a Next.js app, I encountered an interesting challenge within one of the components involving a DropdownMenu that triggers a DialogAlert (both powered by Shadcn components). The issue arises when attempting to manage the dialog& ...

Update in slide height to make slider responsive

My project involves a list with text and images for each item: <div class="slider"> <ul> <li> <div class="txt"><p>First slogan</p></div> <div class="img"><img src="http://placehold.it/80 ...

Tips for submitting an AJAX form in grails without relying on a traditional submit button

I am utilizing a g:formRemote tag to submit a form via ajax. <g:formRemote name="listAll" update="menuItemAJAX" url="[controller: 'superWaiter', action:'menuItem']" onSuccess="additionalContent()"> <a h ...

Include a Vue component within another Vue component in a Laravel application using VueJs

I've recently integrated Vue.js into my Laravel project and encountered an issue when trying to call a component within another component. After running the command npm run dev, I received a webpack error. Here is the code snippet from my parent comp ...

What is the method for executing a function enclosed within a variable?

As someone new to the world of Java, I have encountered a puzzling issue with some code related to a game. Specifically, there seems to be an obstacle when it comes to utilizing the navigator function. When I click on this function in the game, some sort o ...

Difficulty in packaging JavaScript resources within Laravel Project

Having trouble setting JS functions as global in my project: In the 'resources\js"', I have: numerosALetras.js: /////////////////////////// function unidades_nal(n){ ... } function decenas_nal(n){ ... } function centenas_nal(n){ ...

Developing a innovative and interactive nested slider using Jssor technology

Trying to implement a dynamic jssor nested slider to showcase albums and images from a mySQL database. Everything works fine with a single album, but when there are two or more albums, the display gets messed up. I'm still learning JavaScript and JQue ...

Creating a nested list component using an array of objects

Seeking guidance for a coding task I recently completed. I was tasked with creating a multiple nested list from an array of objects. While I achieved the expected result, my code ended up being overly complicated and not very clean. I used a combination of ...

Tips for creating a backup static file for angular-translate

When utilizing the translateUrlLoader to retrieve the resource file from the server, what steps should be taken if this process fails? Is there a way to seamlessly switch to using a local file instead? ...

Adjust variable values when the window is resized

I've been working on getting some variable values to update when the window is resized. After researching, I learned that it's recommended to declare the variables outside of the .resize function scope and then try to change their values within ...

Guide on implementing jQuery Validation plugin with server-side validation at the form level

Does anyone have a suggestion for how to handle server-side validation errors that occur after passing the initial client-side validation on a form? $("#contact_form").validate({ submitHandler: function(form) { $.ajax({ type: 'POST', ...

Challenges Encountered with Random Image Generator in JavaScript

I am encountering an issue with a script that is supposed to change the default images to a random image each time the page is refreshed. However, I keep receiving an error stating that boxID is null. Why is boxID null? <script type="text/javascript" ...

Having trouble with CSS paths in EJS Node.JS Express when dealing with URLs containing multiple parameters?

Apologies for my limited English skills! Currently, I am working on a web application using NodeJS/Express and EJS as the template engine. I have encountered a problem in my development process. Below is the folder structure of my project: App folder/ ...

Managing jQuery Dependency in Node Package

I am facing an issue while trying to implement the 'jvectormap' package in Node, as it has a dependency on jQuery. My query is fairly straightforward. Whenever I attempt to import jVectorMap, I encounter the following error: Uncaught ReferenceE ...

What is the best way to have a sound play when the page is loaded?

Is there a way to automatically play a sound when the page loads? <audio src="song.mp3"> Your browser does not support the audio element. </audio> I've attempted it with the following method: <script type="text/javasc ...