Troubleshooting: AngularJS not retrieving values from hidden input fields in ASP.NET MVC

I'm working on passing a list to a view as a hidden type and retrieving those values using Angular.

for(int i = 0; i < Model.ListOfIds.Count;i++)   
{
    <input type="hidden" ng-model="model.ManagersId" value="@Model.ListOfIds[i]" />

    // or

    <input type="hidden" ng-model="model.ManagersId" ngvalue="@Model.ListOfIds[i]" />

    // or

    @Html.HiddenFor(m => m.ListOfIds[i], new { @ng_model="model.ManagersId"}) 
}

Within my Angular controller, I have the following:

$scope.GetValues= function () {
    console.log($scope.model);
}

I am able to retrieve the values of all other fields except for the hidden type. When the function is called, the output resembles:

Object {Info: "A", Info: "B"}

Could someone assist me with this issue?

Answer №1

Utilize the ng-Init directive to assign a value to the hiddenfield

for(int i = 0; i < Model.ListOfIds.Count;i++)   
{
    <input type="hidden" ng-model="model.ManagersId"  ng-init="model.ManagersId = @Model.ListOfIds[i]" />

}

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

ajax fails to send the variables, instead sending undefined values

In my HTML code, I have inputs and checkboxes. The JavaScript code collects the data from the inputs, and through AJAX, it should send the information to PHP where it is received and stored in the session. However, when sending the array to the PHP file v ...

Indeed, verifying parent.parent access

Currently, I am utilizing the yup module to validate my form. My objective is to access the parent in order to test the value. Below is my schema: enabled: yup.boolean(), contactDetail: yup.object().shape({ phoneNumber1: yup.string().nullable(), pho ...

Is it important that the end date does not exceed the start date?

In my request, the end date cannot be later than the start date. For example, if the start date is 24/4/2017 and the end date is 23/4/2017, the search function should be disabled for the calendar date 23/4/2017. Only dates from 24/4/2017 onwards should be ...

Tips for reusing a form within a one-page website

I am looking for a way to handle a form's submit action using JavaScript. My goal is to hide the form when it is submitted and then be able to reuse it later. However, the code I currently have seems to have a hidden state that prevents the submit act ...

How to manage ajax URLs across multiple pages?

I have my website set up at http://example.com/foo/ within a directory, separate from the main domain. Through the use of .htaccess, I've configured the URLs to appear as http://example.com/foo/about/, http://example.com/foo/polls/, http://example.com ...

Navigate to the middle of the visible area

Is there a way to automatically center a div when it is clicked, so that it scrolls to the middle of the browser viewport? I have seen examples using anchor points but I want to find a different solution. Any ideas on how to accomplish this without using ...

Tips for fading out two elements after completing a drag and drop action

Visit this Codepen for more examples - Codepen I have been developing a drag and drop feature in my application. Once the item is dropped, it transitions from red to green and fades out smoothly. The droppable element behind the draggable should also fad ...

The ActionController is encountering an UnknownFormat error when trying to respond to AJAX requests with js using

I've been scouring the internet for information on this topic, but I'm having trouble understanding how AJAX works with Rails. I've gone through the documentation multiple times and it's just not clicking for me. From what I gather, AJ ...

Incorporating a background image into a card component using props

I attempted to add a background image to the card component through props, but the image failed to display on the card. I didn't encounter any errors, and I'm unsure what mistake I might be making. Any suggestions or alternative solutions would b ...

The steps to view the JavaScript file of a website using a web browser's inspector tool

As I was exploring the web browser inspector tool, I attempted to view the JavaScript source code of a website (). However, all I could find was HTML code (view-source:). I am eager to access the JS file from my browser directly. How can I achieve this? I ...

Simple Express Path Challenge

I've hit a roadblock in my JavaScript tutorial on Mozilla and could really use some assistance. Below are excerpts from 3 different files: a) In the app.js file, I am trying to locate Router handlers and then present them: //app.js //the fol ...

Could there be a glitch occurring with the input type="image" feature when using Internet Explorer?

Currently, I am using Internet Explorer 9 (rtm) and I am uncertain whether the issue I am facing is due to my own actions or a bug within Internet Explorer 9. In my ASP.NET MVC application, the form controller is defined as: [HttpPost()] [UrlRoute(Path ...

Issue encountered while parsing JSON file using AngularJS

Having some trouble reading a json file in AngularJS using $http.get and encountering errors in the browser console. Check out my Plunker example: http://plnkr.co/edit/SDRpu1MmrTPpgpdb6Kyk?p=preview Below is the code snippet: Javascript:- var jayApp = ...

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

Learn how to dynamically highlight a table row when any changes are made to it using jQuery

Is there a way to automatically highlight the current table row when any input text or image is changed within that specific row using jQuery? In the given code snippet below, with two rows provided, how can one of the rows be highlighted upon modifying ...

The issue at hand is why the closure is not functioning properly when variables are assigned to the callback of the getCurrentLocation function

Apologies for the extensive amount of code, but it seems like there may be an issue with AppMobi's getCurrentLocation function in this scenario. The problem arises when tapping on list elements triggers an asynchronous getCurrentLocation call which up ...

Guide on generating a JSON dataset by combining two arrays and sending it back to an AJAX request

key:[id,name,address] value:[7,John,NewYork] I would like to generate a JSON object similar to {"id": 7, "name": "John", "address": "NewYork"} using a for loop, and then send it back to ajax $.ajax({ //what should be ...

Guide to including objects into your project without the need for babel through the use of CDN

I'm struggling with getting my Vue code to transpile properly due to some issues. I have resorted to loading Vue and other packages directly using CDN links, like this: <script src="https://cdnjs.cloudflare.com/ajax/libs/survey-vue/1.8.33/surv ...

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

"Mastering the Art of Placing the VuetifyJS Popover: A Comprehensive

When using VueJS with VuetifyJS material design components, how can I adjust the positioning of the Vuetify popover component to appear below the MORE button? The current placement is in the upper left corner which I believe defaults to x=0, y=0. Button: ...