Hidden input field in Angularjs not update

2
votes

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?

1
javascriptangularjs
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
For some reason, I must control a hidden filed in html which is generated by server side, not in js controler code. – qichunren
Alright check out my updated answer. – Jesus is Lord

1 Answers

1
votes

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.