Issue with ng-model in ng-repeat not functional

I need assistance with setting the ng-model for answer option checkboxes in a list of questions and options. I am currently using two ng-repeat directives to display the questions and options, but I'm unsure how to set the ng-model to capture all selected options for each question.

My attempt at setting the ng-model as answers[qst.id][ans.id] resulted in an error:

TypeError: Cannot set property '*' of undefined

<div ng-repeat="qst in questions">
    <div>{{qst.question}}</div>
    <div>
        <ul>
            <li ng-repeat="ans in answers">
                <span>
                    <input type="checkbox" ng-model="answers[qst.id][ans.id]">
                </span>
                <span>
                    {{ans.ansOption}}
                </span>
            </li>
        </ul>
    </div>
</div>

Can someone provide guidance on the correct approach to achieve this?

Answer №1

Regarding the organization of Answers, it seems to follow an object structure with key-value pairs. I linked the checkbox to the key checked within each answer.

<div ng-repeat="q in questions">
    <div>{{q.question}}</div>
    <div>
        <ul>
            <li ng-repeat="a in answers[q.id]"><span><input type="checkbox" ng-model="a.checked"></span><span>{{a.answerOption}}</span></li>
        </ul>
    </div>
</div>

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

What is the best tool to develop my AngularJs class library (service/factory/provider)?

I am currently working on my main service: (function (angular) { "use strict"; angular .module("app") .service("mainService", mainService); mainService.$inject = ["classLibrary"]; function mainService(classLibrary) { this.person = new clas ...

Tips for incorporating dynamic content into React Material UI expansion panels while maintaining the ability to have only one tab active at a time

I'm working on a project using WebGL and React where I generate a list of users from mock data upon clicking. To display this content in an accordion format, I decided to use Material UI's expansion panel due to my positive past experience with ...

An error was encountered while trying to use the 'export' token in lodash-es that was not

Transitioning from lodash to lodash-es in my TypeScript project has been a challenge. After installing lodash-es and @types/lodash-es, I encountered an error when compiling my project using webpack: C:\..\node_modules\lodash-es\lodash. ...

Redux/React project bundle

I am currently attempting to incorporate the package https://www.npmjs.com/package/is-url into my React/Redux project, but I'm unsure about how to go about importing it. Are there any other ES6-compatible installation options that you would recommend ...

Create an interactive JSON tree structure

I am looking to create a JSON tree from an array. My array is structured like this: var arraySource = []; arraySource.push({key : "fr", value: "france"}); arraySource.push({key : "es", value: "spain"}); //... console.debug(arraySource); The desired JSON ...

Encountering Zip File Corruption Issue post MongoDB Download

My goal is to attach a zip file to an object and request the zip file when the object is called from the client. I was successful in uploading the zip file using the following code: const upload = multer({ fileFilter(req, file, cb){ if (!file. ...

Is there a way to generate a fresh array by filtering an array of objects based on a single value?

I am currently working with an array of objects: const dummyLinkRows = [ { id: 'entity:link/1:en', categories: [ { name: 'Human Resources' }, { name: 'Social' } ], nam ...

JQuery causing array to not update properly

I am attempting to splice an array to remove an object from it. My approach involves using angular-formly for form display, and AngularJs with JQuery to manage the data. Utilizing JQuery $(document).on("click", ".delete-me", function () { var id = $( ...

Develop a gallery similar to YouTube or Vimeo

Is there a way to display a collection of SWF movies in a single DIV, with one SWF already set as the default? Something like a photo gallery but for SWFs. I would like to implement this using JQuery. Any suggestions or tips on how to achieve this? ...

Upload file via AJAX immediately after downloading it (no need for storage)

Currently, I am in the process of developing a JavaScript script to safeguard an old game development sandbox website from being discarded by its owners. In order to prevent the loss of all the games on the site, I have managed to create a script that allo ...

The functionality of jQuery.hover with AJAX is malfunctioning

I am facing an issue with my jquery hover combined with $.post method. My initial intention was to create a series of select buttons where hovering would trigger a change in the image being displayed (the image path would be loaded via $.post). The image ...

Ways to conceal a grid item in Material UI framework

My goal is to hide a specific grid item for a product and smoothly slide the others in its place. Currently, I am using the display:none property but it hides the item instantly. I have already filtered the products and now I want to animate the hiding of ...

Can a valid HTML structure be reconstructed from a fragment?

Imagine you have just <td>text<td></tr>. Clearly, by itself, it is not considered valid HTML (and neither is just <td>...</td>). Is there a simple method to reconstruct a valid HTML structure from this fragment? It should lo ...

SpineJS combined with Express

Are there any recommended tutorials or case studies showcasing the integration of SpineJS and Express in applications? I have experimented with both technologies, but am currently facing some challenges. My backend is set up to run Express by using coffee ...

Can we rely on JavaScript to maintain the order of object properties?

Let's say I define an object in the following way: var obj = {}; obj.prop1 = "Foo"; obj.prop2 = "Bar"; Is it guaranteed that the object will always appear exactly like this? { prop1 : "Foo", prop2 : "Bar" } In other words, will the properties reta ...

What is the best way to utilize jQuery.post in order to push JSON data to a php script?

I have a JSON object in my JavaScript code stored in the variable dataStore. I've confirmed that JSON.stringify is working correctly by testing it with console.log(). However, as someone new to jQuery and CGI applications, I may be missing something. ...

What is the standard root directory in the "require" function's context?

After spending hours struggling to set up a simple "require" command, I've come to the conclusion that var example = require("example") only works if there's an example.js file in the node_modules directory of the project. I'm encountering ...

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

When I hover over a LI tag, I want to display a menu. I have successfully implemented it using a simple variable with the following code: @mouseover="hoverFormsControls=true" @mouseleave="hoverFormsControls=false" However, when I attempted to use an arr ...

Multiple tabs open with inactive sessions

I am currently facing an issue regarding user idle timers in jQuery. I have implemented a timer that logs the user out of the app if they are inactive for 30 minutes, and this works perfectly with one browser tab open. However, I now need to extend this ...

Adjust the size of an image with jquery without relying on server-side scripts

I am currently developing an application for Samsung Tizen TV that displays images from live URLs. On one screen, there are approximately 150 images, each with a size of around 1 MB and a resolution of 1920 by 1080. Navigating between these items has bec ...