Is it possible to bind the value of an input to the value of another input? The following is not working:
<input ng-model="val">
<input value="Hello {{val}}">
-
What is not working? It seems to work for me.Davin Tryon– Davin Tryon2013-11-04 10:45:45 +00:00Commented Nov 4, 2013 at 10:45
Add a comment
|
3 Answers
Here is simple solution: http://plnkr.co/edit/7HxnM3O1UE1RxCCPvvJ0?p=preview
app.js
app.controller('MainCtrl', function($scope) {
$scope.formatText = function() {
return "Hello " + $scope.text;
};
$scope.$watch('text', function(newValue) {
$scope.formatedText = "Hello "+ (newValue ? newValue : "");
})
});
index.html
<body ng-controller="MainCtrl">
<input type="text" ng-model="text"/>
<input type="text" ng-model="formatedText"/>
</body>
For more common way you can use $scope.$eval together with your own directive.
Comments
For your simple use case you posted you can use dot notation.
Fiddle example Fiddle
<input ng-model="new.val">
<input value="Hello {{new.val}}">
By using dot.notation you avoid collision with scoping issues and conflict with global namespace. Not knowing all the variables involved this might have been the issue.
Anything $scope.val would interfere.
<input ng-model="val">
<input value="Hello {{val}}">
By using dot notation and deep linking you can avoid a lot of common issues.
2 Comments
Davin Tryon
The OPs code works as is. What advantage to you get from using dot notation?
Ara Hacobian
Added more explanation. With limited info I tried posting a common issue I've seen.
Yes. Here is a working plunker with your code.
js:
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope) {
$scope.val = 'Guy';
});
html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<h1>Hello Plunker!</h1>
<input ng-model="val">
<input value="Hello {{val}}">
</body>
</html>
*Note: you aren't required to add val to the controller unless you want to initialize its value.
