Это очень простое решение Аканша.Все, что вам нужно сделать здесь, это сделать несколько изменений следующим образом:
Прежде всего,
Sum<input type="text" ng-model="sum">
{{num1+" "+num2}}
Это неправильно, если вы пытаетесьчтобы найти сумму ... потому что то, что вы на самом деле делаете, это просто добавление (присоединение второго числа к первому с пробелом между ними).
Таким образом, вы можете сделать ЛЮБОЙОДНА из следующих 3 вещей:
Замените вышеуказанный код на: Sum<input type="text" ng-model="sum" value="{{num1+num2}}">.
Видите, причина, по которой ваш результат выходил за пределы текстового поля, былапотому что вы не указали его в качестве значения текстового поля, вместо этого оно было явно размещено за его пределами.используя value="{{num1+num2}}", вы устанавливаете значение самого текстового поля.
Код в этом подходе будет выглядеть так:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> ANGULAR JS</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="E:\akansha\angular-1.7.6\angular.js"></script>
<script src="E:\akansha\angular-1.7.6\angular.min.js"></script>
<div ng-app="sumApp" ng-controller="sumCtrl">
Enter first number<input type="number" ng-model="num1"><br> Enter second number<input type="number" ng-model="num2"><br> Sum
<input type="text" ng-model="sum" value="{{num1+num2}}">
</div>
<script>
var app = angular.module('sumApp', []);
app.controller('sumCtrl', function($scope) {
var a = $scope.num1;
var b = $scope.num2;
var c = a + b;
$scope.sum = c;
});
</script>
</body>
</html>
В случае, если вам нужно подождать, пока пользователь введет оба числа, и необходимо рассчитать сумму после того, как оба введены, используйте $watchGroup
$scope.$watchGroup(['num1', 'num2'],function(){
$scope.sum = $scope.num1 + $scope.num2;
});
ЕслиВы хотите, чтобы окно результатов обновлялось так же, как и при вводе 1-го решения, в противном случае, если вам нужно, чтобы страница подождала, пока вы ввели оба числа полностью, просто введите кнопку.при нажатии на кнопку вызовите функцию, которая вычислила бы сумму для вас в контроллере, и установите значение поля результатов из самого контроллера, используя атрибут innerHTML.
вот код таким образом:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> ANGULAR JS</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="E:\akansha\angular-1.7.6\angular.js"></script>
<script src="E:\akansha\angular-1.7.6\angular.min.js"></script>
<div ng-app="sumApp" ng-controller="sumCtrl">
Enter first number<input type="number" ng-model="num1"><br> Enter second number<input type="number" ng-model="num2"><br>
<button ng-click="add();">Add</button>
<br><br> Sum
<input type="text" id="sum" ng-model="sum">
</div>
<script>
var app = angular.module('sumApp', []);
app.controller('sumCtrl', function($scope) {
var a = $scope.num1;
var b = $scope.num2;
$scope.add = function() {
$scope.sum = $scope.num1 + $scope.num2;
document.getElementById("sum").innerHTML = $scope.sum;
}
});
</script>
</body>
</html>