Angular Js Data bind in input text

Question

I want to bind two input box firstname and lastname data in other input box FullName and also this box is readonly

I can easily bind data in div or span but not in input box.

I have add my code Please suggest me what is best of this.

	var myApp = angular.module('myApp', []);
	myApp.controller('studentController', function($scope) {
		$scope.student = {
			firstName : "Mahesh",
			lastName : "Parashar",
			fees : 500,
			subjects : [{
				name : 'Physics',
				marks : 70
			}, {
				name : 'Chemistry',
				marks : 80
			}, {
				name : 'Math',
				marks : 65
			}],
			fullName : function() {
				var studentObject;
				studentObject = $scope.student;
				return studentObject.firstName + " " + studentObject.lastName;
			}
		};
	}); 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="studentController">
 <table>
 <tr>
 <td>Enter Your Name</td>
 <td>
 <input name="name" ng-model="name" />
 </td>
 </tr>
 <tr>
 <td>Hello Greetings,</td>
 <td ng-bind="name"></td>
 </tr>
 </table>
 <br />
 <hr />
 <br />
 <table border="1px">
 <tr>
 <td>Fisrt Name</td>
 <td>
 <input type="text" name="fname" ng-model="fname" />
 </td>
 </tr>
 <tr>
 <td>Last Name</td>
 <td>
 <input type="text" name="lname" ng-model="lname" />
 </td>
 </tr>
 <tr>
 <td>Full Name</td>
 <td>
 <input type="text" name="lname" ng-bind="fname" />
 <span ng-bind="fname"></span>
 </td>
 </tr>
 </table>
</div>

Thanks in Advance Priyanka

• Vivz: Please upvote answer if it was helpful. :)

Answer 1

You can use ng-model to bind the value of your two input box to input box of fullname. I have made this read only by disabling it. You cannot use ng-bind with input boxes.

	var myApp = angular.module('myApp', []);
	myApp.controller('studentController', function($scope) {
		$scope.student = {
			firstName : "Mahesh",
			lastName : "Parashar",
			fees : 500,
			subjects : [{
				name : 'Physics',
				marks : 70
			}, {
				name : 'Chemistry',
				marks : 80
			}, {
				name : 'Math',
				marks : 65
			}],
			fullName : function() {
				var studentObject;
				studentObject = $scope.student;
				return studentObject.firstName + " " + studentObject.lastName;
			}
		};
 $scope.$watch('student.firstName + "" + student.lastName', function(newval,oldval) {
 $scope.fullname=newval;
 
});
	}); 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="studentController">
 <table>
 <tr>
 <td>Enter Your Name</td>
 <td>
 <input name="name" ng-model="name" />
 </td>
 </tr>
 <tr>
 <td>Hello Greetings,</td>
 <td ng-bind="name"></td>
 </tr>
 </table>
 <br />
 <hr />
 <br />
 <table border="1px">
 <tr>
 <td>Fisrt Name</td>
 <td>
 <input type="text" name="fname" ng-model="student.firstName " />
 </td>
 </tr>
 <tr>
 <td>Last Name</td>
 <td>
 <input type="text" name="lname" ng-model="student.lastName " ng-blur="fullname=student.fullName();" />
 </td>
 </tr>
 <tr>
 <td>Full Name</td>
 <td>
 <input type="text" name="lname" ng-init="fullname=student.fullName();" ng-model="fullname" ng-disabled="true" />
 <span ng-bind="student.fullName()"></span>
 </td>
 </tr>
 </table>
</div>

• Priyanka Sankhala: that time I have no rights for accept answer but now I have
• Vivz: You can still accept the answer if it helped you. :) @PriyankaSankhala
• Vivz: @PriyankaSankhala I don't think its accepted as there is no green tick mark besides the answer.