Hidden input field in Angularjs not update

Question

I use angularjs v1.0.7. I have a hidden form field, which it's value is related with other input value. In http://jsfiddle.net/4ANaK/ example, hidden filed not update as I type in text input filed filed.

<div ng-controller="MyCtrl">
    <form ng-submit="action()">
      name:<input ng-model="name" type="text"  value="you 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);                
    }
}

How to fixed the problem?

I don't think Angular pays attention to the value attribute like that. What are you trying to accomplish? Have a hidden form field be submitted that is computed from scope variables? — Jesus is Lord
– Jesus is Lord, Commented Aug 30, 2013 at 6:10
For some reason, I must control a hidden filed in html which is generated by server side, not in js controler code. — qichunren
– qichunren, Commented Aug 30, 2013 at 6:16

Jesus is Lord · Accepted Answer · 2013-08-30 06:18:37Z

1

Attempt 1

Adding this to your controller solves your fiddle. Does it solve your real problem, too?

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

http://jsfiddle.net/4kySW/

Attempt 2

Alright so what about this? This is done purely in the view.

http://jsfiddle.net/4kySW/1/

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

Edit

Looks like the ng-init wasn't necessary.

edited Aug 30, 2013 at 6:18

answered Aug 30, 2013 at 6:12

Jesus is Lord

15.4k11 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

qichunren Over a year ago

This is not really solve my problem, for some reason, I want to control it in html which is generated by server side, not in js controller code.

Collectives™ on Stack Overflow

Hidden input field in Angularjs not update

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related