AngularJS's hidden input field is not being properly updated

I am currently using angularjs v1.0.7 and facing an issue with a hidden form field whose value is related to another input value. In the example provided at http://jsfiddle.net/4ANaK/, the hidden field does not update as I type in the text input field.

<div ng-controller="MyCtrl">
    <form ng-submit="action()">
      name:<input ng-model="name" type="text"  value="your name">
      <input ng-model="nice_name" type="hidden" value="Mr {{name}}" >
      <input type="submit">
    </form>
</div>

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.name = "David";

    $scope.action = function(){
        alert($scope.nice_name);                
    }
}

Can anyone help me fix this problem?

Answer №1

First Solution Attempt

If you add this snippet to your controller, it will fix the issue in your demonstration. But does it also address your actual problem?

$scope.$watch('name', function (value) {
    $scope.nice_name = 'Mr ' + value;
});

View the solution on JSFiddle


Second Solution Attempt

Alternatively, what about trying this approach that only involves changes in the view?

Explore another solution on JSFiddle

<input ... ng-change="nice_name = 'Mr ' + name" ng-init="nice_name = 'Mr ' + name">

Edit

Upon review, it seems that the ng-init directive was not actually needed.

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

The key to subscribing only once to an element from AsyncSubject in the consumer pattern

When working with rxjs5, I encountered a situation where I needed to subscribe to an AsyncSubject multiple times, but only one subscriber should be able to receive the next() event. Any additional subscribers (if still active) should automatically receive ...

Error accessing Amazon S3 through ng-file-upload due to authorization problems

After spending a considerable amount of time on this task, I seem to be stuck in a loop receiving the same error message from Amazon no matter what approach I take. <Error> <Code>InvalidArgument</Code> <Message>Unsupported Auth ...

What is the best way to display JQuery mobile tap event information in real-time?

I am experiencing an issue in my code where the tap event is being triggered, but the array[i] value is printed as null. Whenever I click on any index, it always prints an empty string (" "). Why does it display null instead of the clicked value? I am see ...

What occurs when a function component is passed as a state variable?

Can a function component be passed as a state variable? Is it possible for the code below to work correctly? I attempted it but encountered an error stating props.children isn't a function. Do you know if this approach can be successful? const App = ...

Working with time durations in Moment.js to manipulate datetime

How can I properly combine the variable secondsToMinutes with the startdate? The value of secondsToMinutes is "3:20" and the startDate is "2:00 PM". The desired endDate should be "2:03:20 PM". Despite my efforts, I keep encountering errors every time I at ...

Submit form only if the field value is valid

I created a form with an input field that captures the user's mobile number and validates it to ensure it begins with '0'. The validation process is functioning correctly, but I am encountering a problem when submitting the form. Even if the ...

VUE 3 inexplicably failing to display the custom component's template, console remains error-free

I am utilizing flask, html, js for building a web application. I am currently facing an issue where the template defined in the component <add-movie> within movies.js is not being rendered into add_movies.html. The add_movies.html extends base_admin ...

Discover a technique to display every individual "echo" statement from PHP in sequence, rather than waiting for the entire script to finish executing

I have developed a PHP script that takes some time to execute and displays multiple "echo" statements as the progress is being made. The script connects to an FTP server, deletes all contents, and then uploads new files. Everything is functioning correctly ...

The regular expression pattern ((xn--)?[a-z0-9]+(-[a-z0-9]+)*.)+[a-z]{2,} is functional when used on regexpal.com, however, it does not yield the

Within the code snippet below, the regular expression in the "pattern" variable is specifically designed to only match the criteria mentioned in the comment (which requires a minimum of 1 letter followed by a dot, and then two letters). var link = "Help" ...

AngularJS postback method fails to trigger

Seeking assistance with my angularJS AJAX postback method. Below is the HTML code I have created: <html xmlns="http://www.w3.org/1999/xhtml" ng-app> <head runat="server"> <title></title> <script src="Scripts/angular.js ...

Designing a personalized look for a property with Styled-System

Styled-System offers various props related to css grid: I have a suggestion for a new prop, gridWrap. My idea is to allow users to adjust the auto-fit value using the gridWrap prop. Here's the base CSS code: grid-template-columns: repeat(auto-fit, mi ...

Runner for Jasmine specifications and directive template URL

Within my angular application, I have encountered two distinct methods for running unit tests. The initial approach involves running Karma, while the alternative is to utilize the Jasmine spec runner due to its simplicity in terms of debugging. One chall ...

Issue with updating robot's direction using string in Javascript not resolving

Javascript Developing a simple game where a robot moves on a 5x5 board based on user input commands 'L' (move left), 'R' (move right), and 'F' (move forward) from a starting position while facing North (N). Clicking the Move ...

The Power of Asynchronous Programming with Node.js and Typescript's Async

I need to obtain an authentication token from an API and then save that token for use in future API calls. This code snippet is used to fetch the token: const getToken = async (): Promise<string | void> => { const response = await fetch(&apos ...

Can the tooltip of an element be changed while the old tooltip is still visible without having to move the mouse away and then back again?

When I have an HTML anchor element with a tooltip that appears when the mouse is hovered over it, and then I use JavaScript to change the tooltip's text using element.title = "Another Tooltip", the new tooltip text does not immediately update visually ...

Send the Vue component as an argument to the function

Currently, I am in the process of transferring a project to Vue and utilizing Muuri as a layout manager. In my code, I have the following snippet: grid.add(itemElem, { layout: false, active: false }); The variable itemElem used to be an HTML element c ...

Do not request for this element within the array

I have a function that applies to all elements in an array, except for the currently clicked one. For example: cubesmixed = [array, with, 145, elements] cubesmixed[54].click(function() { for(var i = 0; i < 145; i++) { var randomnumber=Math.flo ...

Exploring the concept of 'API-first architecture' in today's web development landscape

Currently, I am delving into the API first architecture in order to implement it on a web application. I came across some valuable insights regarding this topic on Advantages of a separate REST backend API? Provided below is an example to facilitate a bet ...

A directive in Angular that leverages the same model but presents varying data

I'm currently developing a custom directive for pagination to be used in two different places on my page. The goal is to have the same pagination directive for two tables of data. Below is the code snippet for the directive: app.directive('pagin ...

Ways to retrieve the content from a textfield

Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...