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

Please upvote answer if it was helpful. :)

Vivz
– Vivz

2017-06-29 12:52:19 +00:00
Commented Jun 29, 2017 at 12:52 — Vivz
– Vivz, Commented Jun 29, 2017 at 12:52

Vivz · Accepted Answer · 2017-06-29 06:13:17Z

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>

edited Jun 29, 2017 at 6:13

answered Jun 28, 2017 at 19:11

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

3 Comments

Priyanka Sankhala Over a year ago

that time I have no rights for accept answer but now I have

Vivz Over a year ago

You can still accept the answer if it helped you. :) @PriyankaSankhala

Vivz Over a year ago

@PriyankaSankhala I don't think its accepted as there is no green tick mark besides the answer.

Collectives™ on Stack Overflow

Angular Js Data bind in input text

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related