gpt4 book ai didi

angularjs - 使用 AngularJS Controller 在第三个文本框中的文本框中显示两个数字的总和

转载 作者:行者123 更新时间:2023-12-01 00:14:01 24 4
gpt4 key购买 nike

我正在尝试使用 AngularJS 中的 Controller 查找在文本框中输入的两个数字的总和并在第三个文本框中显示结果。但我没有得到答案。这是我尝试过的代码:

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


请告诉我我错在哪里。

最佳答案

这是一个非常简单的解决方案 Akansha。您需要在这里做的只是进行一些更改,如下所示:

  • 首先,
    Sum<input type="text" ng-model="sum">
    {{num1+" "+num2}}

    就您试图找到总和而言,这是不正确的......因为,您实际上正在做的只是附加(将第二个数字与第一个数字连接起来,中间有一个空格)。

  • 所以你可以做以下三件事中的任何一件:
  • 将上面的代码替换为: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;
    });
  • 如果您希望结果框在您输入第一个解决方案时更新,否则如果您需要页面等到您完全输入两个数字,那么只需引入一个按钮。单击按钮时,调用一个函数,该函数将为您在 Controller 中计算总和,并使用 innerHTML 从 Controller 本身设置结果框的值。属性。

  • 这是这样的代码:

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

    关于angularjs - 使用 AngularJS Controller 在第三个文本框中的文本框中显示两个数字的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54997032/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com