Obtaining a complex object from a Checkbox set in AngularJS through the use of ngModel

Question

Obtaining a complex object from a Checkbox set in AngularJS through the use of ngModel

Hey there!

I've been searching on Stack Overflow regarding this topic, but I haven't found a solution that matches exactly what I need.

If you want to take a look at the code, here is a JSFiddle link for reference: http://jsfiddle.net/gsLXf/1/

Currently, I'm working on a survey with a dynamic set of questions. I have managed to bind text and radio responses to a 'response' object successfully. However, I'm facing an issue with checkboxes. In the fiddle example, when I use

ng-model="response[question.id]"

all checkboxes act as one entity since they are bound to the same value. On the other hand, if I try using

ng-model="response[question.id][option.id]"

I encounter an error because question.id hasn't been initialized yet, therefore option.id can't be added to the object.

The response object in the JSFiddle should ideally look like this:

{
   "123456": "2", //radio question
   "789012": //checkbox question 
       ["5", "6"] //list of selected checkbox option ids
}

Since my users will be creating forms dynamically, it's crucial for me to handle this gracefully under all circumstances. I cannot manually input any object-related data into a controller or create model objects specifically for this scenario.

I have thought about looping through the known ID set to structure a response object to be filled during initialization, but it feels like too much work considering Angular offers a simple way of creating response objects (except in this case).

What would be the most effective approach to deal with this situation?

javascript angularjs checkbox angular-ngmodel

Answer 1

Answer №1

If you're looking for a solution, check out this demo: http://jsfiddle.net/2jVtH/

An alternative approach is to use a custom directive called cbb, which simplifies the HTML structure like so:

<div cbb question="question" response="response"></div>

This not only streamlines the code but also enhances readability, especially if applied to radio buttons as well.

The directive creates an isolated scope and assigns checkbox values to an object within it:

scope.model = {}

By utilizing a deep $watch on this object, an array of values is updated to achieve the desired format, such as

response = { "789012": ["7", "8"] }

.

Here's the complete code snippet for the directive:

surveyApp.directive("cbb", function() {
    return {
        restrict: "A",
        scope: {
            question: "=",
            response: "="
        },
        template:
            "<div class='text'>{{question.question}}</div>" +
            '<div class="options" ng-repeat="option in question.options">' +
                '<input type="checkbox" ng-model="model[option.id]" value="{{option.id}}"/> {{option.value}}' +
                '<tags ng-if="option.tags"></tags>' +
                '<action ng-if="option.action"></action>' +
            '</div>',
        link: function(scope, element, attrs) {
            if( !scope.response[scope.question.id] ) {
                scope.response[scope.question.id] = [];
            }
            var result = scope.response[scope.question.id];
            scope.model = {};
            scope.$watch("model", function(newval) {
                var x;
                result.splice(0);
                for( x in newval ) {
                    if( !newval.hasOwnProperty(x) ) continue;
                    if( newval[x] ) result.push(x);
                }
            }, true);
        }
    };
});

Answer 2

If you're looking for a solution, check out this demo: http://jsfiddle.net/2jVtH/

An alternative approach is to use a custom directive called cbb, which simplifies the HTML structure like so:

<div cbb question="question" response="response"></div>

This not only streamlines the code but also enhances readability, especially if applied to radio buttons as well.

The directive creates an isolated scope and assigns checkbox values to an object within it:

scope.model = {}

By utilizing a deep $watch on this object, an array of values is updated to achieve the desired format, such as

response = { "789012": ["7", "8"] }

.

Here's the complete code snippet for the directive:

surveyApp.directive("cbb", function() {
    return {
        restrict: "A",
        scope: {
            question: "=",
            response: "="
        },
        template:
            "<div class='text'>{{question.question}}</div>" +
            '<div class="options" ng-repeat="option in question.options">' +
                '<input type="checkbox" ng-model="model[option.id]" value="{{option.id}}"/> {{option.value}}' +
                '<tags ng-if="option.tags"></tags>' +
                '<action ng-if="option.action"></action>' +
            '</div>',
        link: function(scope, element, attrs) {
            if( !scope.response[scope.question.id] ) {
                scope.response[scope.question.id] = [];
            }
            var result = scope.response[scope.question.id];
            scope.model = {};
            scope.$watch("model", function(newval) {
                var x;
                result.splice(0);
                for( x in newval ) {
                    if( !newval.hasOwnProperty(x) ) continue;
                    if( newval[x] ) result.push(x);
                }
            }, true);
        }
    };
});

Answer 3

Answer №2

Despite my best efforts, the Angular directive and HTML code I worked on still contain redundant empty strings in an array when a checkbox is unchecked.

To address this issue, I attempted to use ng-init:

ng-init="response[question.id] = []"

Here is the link to the jsfiddle:

http://jsfiddle.net/P9dsR/

Answer 4

Despite my best efforts, the Angular directive and HTML code I worked on still contain redundant empty strings in an array when a checkbox is unchecked.

To address this issue, I attempted to use ng-init:

ng-init="response[question.id] = []"

Here is the link to the jsfiddle:

http://jsfiddle.net/P9dsR/

Obtaining a complex object from a Checkbox set in AngularJS through the use of ngModel

Answer №1

Answer №2

Similar questions

When attempting to update a task with the Microsoft Graph API, the server returned a 400 error code

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

Vue transition not functioning properly when hovering over text for changes

What steps should I take to create an object that can be converted into a JSON schema like the one shown here?

Updating a data with a JavaScript browser script

jwplayer - track viewing time - monetize by the minute - trigger action based on duration

Tracking changes to payment methods when an order is modified through the WooCommerce backend

The status value in the result has a whitespace just before the term "success"

Unique Input Values in Forms

What is the hierarchy for displaying elements depending on the props?

Why can my JavaScript server code read "2011" but not "20,11" when both are formatted as strings?

Leveraging React SSR with Next.js, we can utilize the `getInitialProps` method to insert a

Reducing the number of DOM manipulations for websites that heavily utilize jquery.append

Encountered an error while trying to retrieve data from

How to calculate large integer powers efficiently in JavaScript using the mod

Troubleshooting issue with Next.JS Redux dispatch functionality inside getStaticProps() not functioning as

Loading SVG images in advance

The Javascript regex allows for the presence of positive and negative numbers, with the option of a single minus symbol

The component data fails to reflect the updated value following a status change due to not properly retrieving the new result from the POST function

Discover the hexadecimal color code generated from an rgba color