Angular Js Data在输入文本中绑定

Question

我想在其他输入框 FullName 中绑定两个输入框 firstname 和 lastname 数据，此框也是 readonly < / strong>

我可以轻松地在div或span中绑定数据，但不能在输入框中绑定。

我已添加我的代码请告诉我最好的内容。

＆＃13;

＆＃13;

	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;
			}
		};

	}); 

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

先谢谢 普里

Answer 1

您可以使用ng-model将两个输入框的值绑定到fullname的输入框。我只是通过禁用它来解读。您不能将ng-bind与输入框一起使用。

	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>