The Angular controller is designed to only capture the changed input values

My angular controller method is quite simple :

$scope.addComment = function () {
        if ($scope.newComment.message) {
          $scope.can_add_comments = false;
          new Comments({ comment: $scope.newComment }).$save(function (comment) {
            $scope.comments.unshift(comment);
            return $scope.can_add_comments = true;
          });
          return $scope.newComment = {};
        }
      };

In the form, I have a textarea where the comment value is stored :

<textarea class="required" cols="40" id="new_comment_message" maxlength="2500" ng-disabled="!can_add_comments" ng-model="newComment.message" required="required" rows="20"></textarea>

Everything works fine so far, but I also want to include some hidden data with the comment. So, I added a field for that value :

<input id="hash_id" name="hash_id" ng-init="__1515604539_122642" ng-model="newComment.hash_id" type="hidden" value="__1515604539_122642">

However, when I check the $scope.newComment, it only shows an object with the message property, which is the value from the text area. The property hash_id doesn't appear.

When I make this input visible and manually enter a value into the field before submitting the form, then I do get an object with the hash_id property. What am I missing here? Am I not setting it up correctly?

Answer №1

From my understanding, the ng-model directive does not rely on the value property as a default value. It will not automatically copy it back into your model. If you want to set a default value, it should be specified where the model is initially defined:

$scope.newComment = { hash_id: "__1515604539_122642", /* Other parameters */ };

Alternatively, you can change the ng-init attribute to an assignment (although I would suggest using the first solution mentioned above):

<input id="hash_id" name="hash_id" ng-init="newComment.hash_id = '__1515604539_122642'" ng-model="newComment.hash_id" type="hidden">

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

Display a new view upon clicking a button using AngularJS in a single-page web application

I am completely new to AngularJS and currently working on my first project. I apologize in advance if my question seems very basic. In my project, I have created a page using simple HTML with three buttons. When these buttons are clicked, I want to load v ...

Creating interactive form fields using React

How can I update nested fields in react forms? First, create a new item using handleAddShareholder. Next, delete an existing item with handleRemoveShareholder. To change details of an item, use handleShareholderNameChange. You can then add a new array ...

Choose carefully when to utilize forkJoin

In a particular scenario, I need an application to generate menus based on specific contexts. Here are the definitions for menuA and menuB: // menuA example from a given source menuA() { return [ { a: 'demo1', b: &apo ...

The Material-UI Select component does not reflect changes after an onChange event

I've encountered this issue all over the internet, but no explanation seems to resolve it for me. Using Material-UI Select and traditional setState(...) in React (not using hooks). The core of my component is as follows: class MyComponent extends Co ...

What is the best way to customize the color and width of div elements on a webpage?

I am trying to customize the colors and widths of multiple div elements using arrays and a for loop in my HTML code. However, I am having trouble figuring out how to properly implement this. Specifically, I want 5 divs on the page with different background ...

Sort through a list of objects using the criteria from a separate array

Looking to apply a filter on an array of objects: const myArray = [{ id: 4, filters: ["Norway", "Sweden"] }, { id: 2, filters :["Norway", "Sweden"] }, { id: 3, filters:["Denmark", "Sweden&q ...

How can you identify the specific HTML page that a jQuery selector is targeting?

In an attempt to create jQuery code that counts the number of <img> elements on a website, I encountered a unique challenge. The website consists of 4 separate HTML pages stored in the same folder on the server. Among these pages, only "pics.html" is ...

Updating AngularJS ng-repeat when changes are made to LocalStorage with the use of store.js may not reflect immediately

One of the functionalities I want to implement is displaying a list of items (subject names) that are stored in a LocalStorage element. The code snippet in my view is structured as follows: <div class="list"> <a class="item" href="#" ng-repeat= ...

Execute two operations using jQuery and PHP

I recently created a form for users to fill out, with the data being sent to my email. However, I also wanted the email information to be posted to my MailChimp account using their API. Unfortunately, this feature is currently not functioning correctly. B ...

Steps for extracting all query parameters from a URL containing a redirect URL as one of the parameters

Below is the code snippet I am currently using to extract query parameters from the application URL. However, this logic fails when a URL is passed as a query param which includes its own query parameters. For example: Example: In this scenario, url2para ...

Autofill feature for styling with CSS within a JavaScript document

Is there a way to enable CSS autocomplete in JavaScript for VS Code? I can easily work with CSS, but the auto suggestions are not showing up when coding in JS. For instance, when typing document.queryselector("myclass")., nothing shows up after the dot li ...

Failure of AJAX HTML function to retrieve value from textarea

I am displaying data in the first three columns of a table, with the last column reserved for user feedback/comments. However, when the form is submitted, the values in the textarea are not being posted. The table has 6 rows. The Sample TR: <tr> &l ...

Ways to send data to nested elements when implementing secure routes?

I am currently working on a project to develop a 'Train Ticket Reservation System' using ReactJS. In order to access the services, users must login, so I have implemented protected routes to render certain components. Instead of relying on the de ...

Converting a stringArray into a collection of function pointers for a librarySystem: A step-by

Right now, I am in the process of creating a library system In the code snippet below, there is a stringArray ['greet','name'] used as dependencies. The goal is to convert this stringArray into an array of functions and pass it into gr ...

What could be causing the input field state to remain static even as I type in the MUI textField?

In my React.js component, I am facing an issue where the textField is not updating when I try to type anything. Upon debugging, I discovered that when the first character is entered, the component re-renders and loses its previous state, causing the textF ...

What is the best way to activate submit buttons once all radio buttons have been chosen?

Having created a form with 4 radio button groups, I am seeking a way to prevent submission of the form unless each group has one radio button selected (i.e., all 4 buttons need to be selected for the form to submit). Despite following suggestions from pre ...

Material-UI: The call stack has exceeded the maximum range, causing an Uncaught RangeError

I am currently utilizing the Dialog and Select components offered by Material-UI in conjunction with React. Here is a quick example: import React from 'react'; import { Dialog, MenuItem, Select } from '@material-ui/core'; class Examp ...

Incorporating an npm reference into a personalized node within Node-RED

As a novice in both the NodeRed and NodeJs/npm realms, I am embarking on the journey of creating a custom node for the first time. Despite my efforts to follow the official documentation on Creating your first node, I seem to have hit a roadblock. Everyth ...

Delete the initial image from the opening list item using jQuery

Here is an example of some HTML code: <ul class="products"> <li> <a href="#" class="product-images"> <span class="featured-image"> <img src="img1.jpg"/> <img src="img ...

How can I assign a property value for a class in one cell from another cell within the same notebook using Observablehq?

I'm brand new to .js classes and my goal is to set a property value for a class that I define in one cell, from within another cell in the same notebook. The cells only contain the code shown here. Below is the test class in cell 1: class hist_class ...