Using ng-repeat to bind checkboxes to an object

I recently started using AngularJS and I'm attempting to bind the object "Optouts.Spouse" to checkboxes that are being ng-repeated from the Plans object.

In my JS, I have:

$scope.optouts = { spouse: {}, children: {} };
$scope.plans = {mec:true;anotherone:true};

And in my HTML, I have:

<span ng-repeat="(plan,x) in plans">{{plan}}
   <input type="checkbox" ng-model="optouts.spouse.plan"
          ng-checked="!optouts.spouse.plan"> 
</span>

However, it seems like the binding is not working as expected. Can anyone point out what I might be doing wrong or suggest a solution to make this work? Thank you!


There's really not much more to show..

 their.plans = {};
 their.toggles = {};
 their.optouts = { spouse: {}, children: {} };
 their.optouts = { spouse: {'mec':true}, children: {} };
 their.spouse = { has:true,
                  firstName: 'Mary',
                  lastName:'Doe',
                  birthDate:'8/10/1989',
                  gender:'Female' }
 their.plans = { mec:true, mr1: true, anotherone:true }

Answer №1

In your case, it seems like you are looping through plans to achieve a specific goal:

<span ng-repeat="(plan,x) in plans">{{plan}}
   <input type="checkbox" ng-model="optouts.spouse.plans[plan]"> 
</span>

The current code creates a property on optouts.spouse.plan, but what you actually want is a "map" of true/false values under each plan. To accomplish this, you can utilize bracket notation with the plan's current value.

Initially, all plans will be unchecked since there are no existing values. The checkbox visually represents true or false states, so using ng-checked is not required. Once a checkbox is toggled, the corresponding plan will have a true/false value.

If you need them to be set to true from the start, consider iterating over them in your controller and initializing each with a value of true.

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

Tips for creating an HTML page with the dimensions of an A4 paper sheet?

My goal is to display the HTML page in a browser while containing the content within the dimensions of an A4 size page. Additionally, when printed, the HTML page should be formatted to fit onto A4-sized paper pages. <div classNa ...

Tips on implementing a function within a navigation bar from a specific context

While working with a user authenticated context, I encountered an issue with the logout function. My goal is to have a link in the navigation bar that triggers the logout function and redirects me to the home page. However, I'm receiving a Typerror: l ...

Is there a way to route an angular request through a spring filter prior to validation?

I'm currently working on implementing an XSS Filter in a backend application (built with JAVA and Spring). The goal is to validate input values from a frontend app (AngularJS) against the filter before proceeding to validate the rest of the content. ...

How can the color of the <md-toolbar> be customized?

Here is a glimpse of how my code appears on CodePen: I am aiming to have the background color of "Sidenav Left" match that of "Menu Items", which is designated by the class .nav-theme { background-color: #34495E } I attempted to override it like this ...

Tips for verifying if two passwords match during registration and displaying an error message if they do not match

How can I ensure that the passwords entered in a registration form match and how do I validate the entire form to be correct? <form id="registerForm" method="POST" action="/register" class="form2"> ...

Changing data in Chart.js, strategies for modifying data after chart creation!

Apologies if this question seems basic. The challenge I am facing is that I need to utilize the same data for multiple charts, but with slight variations in options for each chart. The data is as follows: var data = { labels: freq, datase ...

The exceptional speed of jQuery's each method sets it apart

I'm currently facing an issue where I am unable to successfully add the attribute data-size to my parent div. My code snippet is as follows: var width, height; $(".galerie img").each(function() { width = this.naturalWidth; height = this.naturalH ...

Three.js: Modifying values within dat.GUI is not allowed

I have added a "comboBox" to my dat.GUI instance in order to select possible values. However, when I run my application, the dat.GUI appears with the comboBox but it seems to be frozen - I cannot change its default value. Below is the code snippet that dem ...

The dynamic duo of AngularJS and jQuery Mobile

When using AngularJS, I have a controller that loads an HTML partial into an ng-view directive. The content of the HTML partial is as follows: <div> <ul data-role="listview" data-inset="true" data-theme="c"> <li><a href="# ...

Merge three asynchronous tasks into a single observable stream

I have 3 different observables that I am using to filter the HTML content. Here is the TypeScript code snippet: fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear); isLoading$ = this.store$.select(this.tableStoreService.tableSelector ...

How to stop Mouseenter event from bubbling up in an unordered list of hyperlinks using Vue 3

I've experimented with various methods to prevent event bubbling on the mouseenter event, but I'm still encountering an issue. When I hover over a link, the event is triggered for all the links as if they were all being hovered over simultaneousl ...

Is it necessary to include a back button when navigating through paginated tables?

Within my AngularJS application, I have implemented pagination on the user list page. This allows me to retrieve ten users at a time from the server, with each click loading another set of ten users on a new page. The user details are presented in a tabl ...

Issues encountered with the functionality of the AngularJS greetController Controller

Currently exploring AngularJS, I am following a tutorial and have hit a roadblock trying to get the greetController controller to function properly. Below is the HTML code: <!DOCTYPE html> <html> <head> <title>HTML.it</titl ...

Implementing JavaScript from dojo.xhrGet within a Symfony framework

Hey there! I'm diving into the world of dojo and symfony, but I've hit a snag. I'm trying to do an Ajax reload of a section on my page, but it involves executing a JavaScript function. While I've got this down in prototype and jQuery, I ...

Javascript is failing to fetch the desired text

I'm in the process of tweaking the code found at 'http://jsfiddle.net/vivin/RjqUf/' to allow users to select a line or word from a PDF. I've added the following JavaScript snippet at the end of the existing code: $(".textLayer").mouseu ...

Decompressing an array within a function invocation

Is there a method to pass an array's elements as arguments to a function? For instance, in Python I can accomplish this using: user = ["John", "Doe"] def full_name(first_name, last_name): return first_name + last_name Therefore, full_name(*user ...

Error: Attempted to access 'embed' before it was initialized (hi)

module.exports = { name: "slowmode", description: "Set the slowmode of a channel.", execute(message, args, Discord) { if(!message.member.hasPermission("ADMINISTRATOR")) { return message.reply(&q ...

Is there a way to create a function in JavaScript that eliminates duplicate Objects within an Array of Objects?

Currently, I'm working on a function to store details of a couch in a JS object with 3 properties locally. The properties include: An ID (obtained from the product URL using a function) A color (retrieved through an event listener) A quantity ...

Having trouble activating the Invalidate Cache function in rtk query with tags

Here is a snippet from my Api.js file: export const api = createApi({ reducerPath: 'api', baseQuery: fetchBaseQuery({ prepareHeaders: (headers, { getState }) => { const userInfo=JSON.parse(localStorage.getItem('userInfo' ...

The system encountered an error due to the absence of a defined Google or a MissingKeyMapError from the

Currently, I am developing a component that includes ng-map functionality by following the guidance in this tutorial. <div class="content-pane" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{$ctrl.googleMapsUrl}}"> & ...