Using AngularJS to bind objects with a checkbox

I am dealing with a nested list of objects that can go up to three levels deep. Each object contains another nested object, and this nesting can continue to multiple levels. I am interested in binding these objects directly to checkboxes so that when I check an item, it will have a direct impact on the corresponding object. Is there a way to achieve this using Angular? A sample object retrieved from the server side is provided below.

Sample Object:

[{
    "name": "nvs_core",
    "discovered": [{
        "name": "tag",
        "Fields": [{
            "name": "tag",
       }]
    }]
    }]
}, {
    "name": "nvs_core_trial",
    "discovered": [{
        "name": "nvs_src_tag",
        "Fields": [{
            "name": "nid",
        }]
    }, 
    }]
}]

Answer №1

Attaching a model to your checkbox allows for different values when checked or unchecked. For an example, check out the link at the bottom of this page: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

<input type="checkbox" ng-model="myobj.discovered.Fields.name.checked" ng-repeat="myobj in ArrayOfObjects"/> 

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

Issue with Tailwind causing content to extend beyond screen with horizontal scrolling

I have a React-based NextJS application using Tailwind CSS. There is a page component that displays a list of individuals sorted from A to Ö (Swedish alphabet). In the mobile view, the user experience requires the list of alphabetical letters to be visibl ...

Refresh Next.js on Navigation

Is there a way to trigger a reload when clicking on a Link component from next/link? I attempted to create my own function within the child div of the link that would reload upon click. However, it seems to reload before the route changes and is not succ ...

Using Ajax and jQuery to fetch information from a previous search query

I'm currently utilizing Ajax and jQuery for my chat feature. Some may find it overly complex, but as long as it works, that's all that matters. It's functioning properly on the first friend result, however, not on the others. The issue lies ...

Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

Three.js version r85 While using raycasting in Three JS, a list of points is generated, and I am interested in identifying the point closest to the cursor. It appears that the first point returned is typically the one nearest to the camera. Is there a me ...

Expanding the sidebar panel during a redirection

I am facing an issue with the expansion panels in my sidenav. I have successfully been able to track and set their open state as they are opened and closed. However, when a list item within the panel is clicked and redirects to another route, the panel c ...

Ajax Syntax Error: Unexpected Token U

I have been struggling all day with an issue while trying to send json data via ajax to Express. Here is how my ajax code looks like: $('#saveClause').click(function () { var username = document.getElementById('postUserName').inne ...

Encountering an unexpected token error while using JSON.parse()

When attempting to parse this JSON string, I encounter an error indicating an unexpected token $scope.feeds = JSON.parse('[{"id":"212216417436_10152811286407437","from":{ "category":"Movie","name":"The Lord of the Rings Trilogy","id":"212216417436"}, ...

Transfer text from one form to a text field on a different website

I've created a form that allows users to input numbers in a field and then directs the page to a specific URL. Here's the code snippet: <html> <head> <meta charset="utf-8"> <title>Tracking</title> </head& ...

Angular-ui typeahead feature allows users to search through a predefined

I recently developed a typeahead feature using the angular-ui library. Here is the current HTML for my typeahead: <input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer.fir ...

What is the best way to transfer an id from one const to another in JavaScript?

I have 2 APIs that I am using to fetch data. The first API, called getDetails, is used to retrieve student details. Within these student details, there is an ID that needs to be fetched from the second API and displayed in the first API. The second API is ...

Steps to retrieve an incorrect fruit when it is located as the initial item within the array

Currently tackling the precourse material for a coding bootcamp and hitting a roadblock with this particular question. Despite my best efforts, I just can't seem to meet one of the 7 conditions required. Let me outline the question, my attempted solut ...

Tips for retrieving information from a dynamically created form using VUE?

Welcome Community I am working on a parent component that includes a child component. The child component dynamically renders a form with various controls from a JSON object retrieved via a Get request using Axios. My goal is to be able to read and loop ...

How can I sort by the complete timestamp when using the Antd table for dates?

I have an item in my possession. const data: Item[] = [ { key: 1, name: 'John Brown', date: moment('10-10-2019').format('L'), address: 'New York No. 1 Lake Park', }, { ...

Animated CSS sidemenu (utilized as a filtering panel for a table)

Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements f ...

What are some effective ways to implement a real-time tracking system for shipments using Angular JS?

I am currently working on developing a shipment tracker using Angular, HTML5, and CSS3. Does anyone have any suggestions on how to dynamically create the shipment tracker using AngularJS? My initial plan is to incorporate ng-animate for the tracker. Than ...

Transforming a Nestjs string object into JSON data

I need to convert this to JSON format. I attempted to use JSON.parse(), but encountered an error. "{"status":"00","message":"OK","access_token":"2347682423567","customer":{"name":"John Doe","address":"Mr. John Doe 34 Tokai, leaflet. 7999.","util":"Demo Ut ...

Is jQuery necessary for Breeze to work in conjunction with AngularJS?

I could use some clarification on using Breeze. I've gone over the documentation but couldn't find a solution to this. If I'm incorporating Breeze with ASP MVC4 and AngularJS, do I need to load the jQuery script as well? ...

There are certain lines of JavaScript/Node.js code that are failing to execute

app.get is not being executed. I have also attempted to include app.listen(3000). My goal is to retrieve the parameter passed from the first web page. This code is designed to fetch parameters sent by another web page and then construct a MySQL query and ...

Hacking through external script injections into the browser

Curious about how certain software or programs are able to inject html,css,js into a web browser without the need for installing any extensions. Every time I open Chrome or Firefox, I'm bombarded with ads on popular sites like Google homepage, Faceboo ...

"Utilize the on() method to bind a click event to dynamically generated elements received

After reading several discussions on using on() to link events to dynamically generated HTML elements, I decided to create an example (FIDDLE) where the click event is bound to elements div.clicktitle fetched via AJAX. These div elements contain data attri ...