Question

使用添加按钮在两个文本框中添加值的计算器显示结果在html中的另一个文本框

<ion-content>
        <div class="tbox">
            <label>
                <input type="number" placeholder="Number 1" ng-model="N1">
            </label>
            <label>
                <input type="number" placeholder="Number 2" ng-model="N2">
            </label>
            <label>
                <input type="number" placeholder="Result" ng-model="R">
            </label>
        </div>

        <label>
            <button class="button button-block button-positive"> Add </button>
        </label>
    </ion-content>

当按下添加按钮时，应该添加来自文本框的用户输入我不知道如何在angularjs中开发它

Answer 1

您没有为结果变量指定+ b。分配给结果变量，您将获得预期结果。Example on plnkr

在模板中添加按钮并绑定点击事件。在点击事件中，只需在结果变量中指定a + b。

我认为你看起来像这样。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example </title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <p> 
      First Number:<input type="number" ng-model="a" />
    </p>
    <p>
      Second Number: <input type="number" ng-model="b" />
    </p>
    <p>
      Result : <input type="number" ng-model="result" />
    </p>
    <input type="button" value="Add" ng-click="add()">
    <p>
       Sum: {{ a + b }}
    </p>
</body>
<script>
  var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
    $scope.add = function(){
         $scope.result = $scope.a + $scope.b;
    };
  });
</script>

</html>

Answer 2

试试这个

<input type="number" value="{{a+b}}" />
<p >
   Sum: <span ng-bind="a+b"></span>
</p>

简单的计算器从文本框中获取数字并将其显示在另一个文本框中

2 个答案: