"AngularJS fails to pass the value of a checkbox within ng-repeat and

I have already asked this question, but the previous solutions did not resolve my issue.

I am attempting to pass the value of a checkbox to a controller in AngularJS, but I keep getting an 'undefined' message. I am new to AngularJS.

Here is the HTML code snippet:

<form class="form-horizontal" name="addForm" novalidate ng-submit="addData(addForm)">
    <div class="form-group">
        <div class="col-sm-3" ng-repeat="directories in formData.getMainDirectories">
            <input type="checkbox" ng-model="directories.main_directories_id.selected" value="{{directories.id}}"><span>  {{directories.name}}</span>
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-md" button-spinner="loading" ng-disabled="loading">Submit</button>
</form>

And here is the corresponding JavaScript code:

$scope.addData = function(form)
{
    $scope.errors = [];
    alert(form.main_directories_id); // alert included
    if(form.$valid)
    {
        $rootScope.loading = true;

        webServices.upload('create', $scope.formData).then(function(getData) {
            $rootScope.loading = false;
            if (getData.status == 200) {
                $sessionStorage.successmessage = getData.data.message;
                localStorage.directory = '';
                $scope.goback();
            } else if (getData.status == 401) {
                $scope.errors = utility.getError(getData.data.message);
                $scope.showerrors();
            } else {
                $rootScope.$emit("showerror", getData);
            }
        });
    }
}

$scope.getMainDirectories = function()
    {
        webServices.get('getMainDirectories').then(function(getData) 
        {
            $rootScope.loading = false;
            if (getData.status == 200) 
            {
                $scope.formData.getMainDirectories = getData.data;
            } else {
                $rootScope.$emit("showerror", getData);
            }
            //console.log(getData.data);
        });
    }

Image: https://i.sstatic.net/xLNfc.png

Answer №1

Finally, I have found the answers!

$scope.fetchData = function(info) {
    $scope.errors = [];

    for (var j = 0; j < $scope.dataInfo.getDirectories.length; j++) {
        if ($scope.dataInfo.getDirectories[j].Chosen) {
            $scope.dataInfo.directories_id.push($scope.dataInfo.getDirectories[j].id);
        }
    }

    //console.log($scope.dataInfo.directories_id);

    if (info.$valid) {
        $rootScope.loader = true;
        networkServices.upload('create', $scope.dataInfo).then(function(receivedData) {
            $rootScope.loader = false;
            if (receivedData.status == 200) {
                $sessionStorage.successmessage = receivedData.data.msg;
                localStorage.folder = '';
                $scope.goBack();
            } else if (receivedData.status == 401) {
                $scope.errors = tools.showError(receivedData.data.msg);
                $scope.displayErrors();
            } else {
                $rootScope.$emit("showerror", receivedData);
            }
        });
    }
}

HTML:

<div class="input-group">
    <div class="col-lg-3" ng-repeat="list in dataInfo.getDirectories">
       <input type="checkbox" ng-model="list.Chosen" /><span>  {{list.title}}</span>
    </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

How can I define the PropType for an object containing a combination of strings and functions?

Trying to define a prop, which is an object of strings and functions. I set proptypes as component.propTypes = { propName: PropTypes.objectOf(PropTypes.oneOf([PropTypes.string, PropTypes.func]) } However, I encountered an error message stating that it r ...

Looking for a resolution? Ensure that actions are plain objects by employing custom middleware specifically designed for managing asynchronous actions

I'm attempting to replicate a MERN stack project named Emaily, but I've encountered an error Error: Actions must be plain objects. Use custom middleware for async actions. Here is the code for my Action: import axios from 'axios'; im ...

Tips for successfully passing multiple properties to a function in React

<DeleteForeverIcon className={classes.deleteHwIcon} onClick={() => { deleteHomework(value.name, value.class); }} /> I'm looking to modify the function deleteHomework so that it can receive two properties instead of just one. In add ...

When attempting to import my JSX file into page.js, I continue to encounter the error "module not found." How can I troubleshoot and resolve this issue in Visual Studio Code

I recently created a new file called mysec.jsx in the components folder of src. I then used the export function to properly export it. However, when I tried to import this file in page.js using the import function, I encountered an error message that said: ...

In what ways can you shut down an electron application using JavaScript?

My Electron app is running an express server. Here is the main.js code: const electron = require("electron"), app = electron.app, BrowserWindow = electron.BrowserWindow; let mainWindow; function createWindow () { ma ...

Discovering the worth of a selected radio button using JavaScript

I need to extract the value of a radio button without any validation or clicking on a button. My goal is to retrieve the live value as soon as the user changes the selected radio button. I've attempted multiple codes, but none of them have been succ ...

Unable to access the inner object using key-value pair in Angular when working with Firebase

Within my json object, there is an inner object labeled data, containing {count: 9, message: "9 sites synced"} as its contents - also in json format. My objective is to extract the value from message, rather than count. Provided below is the temp ...

Error: The object #<HTMLCollection> does not support the 'tags' method

While trying to troubleshoot this issue, it seems like I haven't been able to pinpoint the simple solution. This particular javascript menu works perfectly in IE, however in Chrome, there is an error when trying to open the menu with a first-level cli ...

What is the best way to create a placeholder for a select option with a looping value?

I have successfully implemented loops for the select options, but I needed to add a placeholder. In other words, I wanted the first value of the select options to be a placeholder, followed by the values generated from the loop. Here is the code that I u ...

What could be causing the NextJS query string to be undefined upon reloading the page?

I am currently working on a NextJS application where I have created a search results page that relies on a query parameter being passed. To grab the query string, I am using the next/router package. The issue I am facing is that after the initial load of t ...

Getting an Array of all values in <th> using jQuery

Is there a more efficient way in jQuery to retrieve an array of all the inner texts of <th> elements within a table? The following code snippet successfully achieves this: $("th").toArray().map(th => th.innerText) I'm curious if there is a ...

Is it possible to utilize a computed property for dynamically styling a table row based on certain conditions?

I have a table of users that I am currently rendering, and my goal is to highlight the entire row only for the current user. My initial thought was to use a computed property to achieve this, but I seem to be facing some difficulties in making it work. I ...

Confirm that the input into the text box consists of three-digit numbers separated by commas

Customers keep entering 5 digit zip codes instead of 3 digit area codes in the telephone area code textbox on my registration form. I need a jQuery or JavaScript function to validate that the entry is in ###,###,###,### format without any limit. Any sugge ...

What steps can be taken to address the build problem with Angular version 13?

Encountering a problem while working with Angular 13: https://i.sstatic.net/CbAUhh6r.png Attempting to build using ng build --configuration=test, however facing errors as mentioned above. Interestingly, if I remove the reference to bootstrap.min.css in t ...

The desktop display is experiencing a technical issue where menus are failing to appear

When my website is opened on desktop, the state remains false which causes no menus to show. I only want this functionality to be active on mobile devices. const Navbar = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const toggle = () ...

Can Angular send a PDF to a .NetCore server?

I have a situation where I am generating a PDF using jsPDF and then attempting to send it to the .NetCore server. I convert the PDF file to a binary string on the front-end and try to reconvert it back to PDF using C#. However, when the service calls the c ...

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

sending an array via xmlhttprequest

I am attempting to send all the marks entered by the user to another page for processing, but only the value of the first mark entered in the table is being sent. Is there a way to send all the values of the marks entered rather than just the first value ...

Is it impossible to generate a string exceeding 0x1fffffe8 characters in JSON parsing operations?

I am currently dealing with a JSON file that contains data of size 914MB. I am using the fs-extra library to load the file and parse it, but encountering an error during parsing: cannot create a string longer than 0x1fffffe8 characters Here is the code ...