Question

我正在尝试添加两个数字，并且只有在单击按钮时才显示其结果。以下是我的代码：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<h2>Calculator</h2>

a: <input type="number" ng-model="a">
b: <input type="number" ng-model="b">
<button ng-click="addFunc()">Sum</button>
Sum : {{sum}}
<!-- <p><b>Summation:</b> {{sum = a + b}}</p> -->
<br/><br/><br/>
c: <input type="number" ng-model="c">
d: <input type="number" ng-model="d">
<p><b>Subtraction:</b> {{c - d}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sum = 0;
    $scope.addFunc = function() {
        $scope.sum=a+b;
    }
});
</script>
</body>
</html>

Answer 1

你写一个＆amp; b作为ng-model，它们自动连接到$ scope对象。

因此，如果您想添加它们，您只需编写

即可

$scope.a + $scope.b

Answer 2

如果您尝试从此函数访问a和b，它将查看此函数的词法范围。由于你没有在那里宣布变量，所以它不会起作用。你没有在范围链中的任何地方声明变量，因为它在由angular维护的自定义$scope （只是一个javascript对象）中。 Angular使用自己的$scope注入控制器，以访问您必须通过$scope.本身访问的范围。我们的想法是在模板（视图）和功能（控制器）

之间共享

$scope.addFunc = function() {
    $scope.sum=a+b;
}

在您的模板a + b中有效，因为角度在内部使用$scope模板中使用的所有变量，因此您不必在那里添加$scope。

<p><b>Summation:</b> {{sum = a + b}}</p>

在您的情况下，您可以使用$scope之类的：

$scope.addFunc = function() {
    $scope.sum= $scope.a + $scope.b;
}

或使用this，因为函数是使用$scope调用的，并且会有隐式引用。

$scope.addFunc = function() {
    this.sum= this.a + this.b; //when calling $scope.addFunc() this will be $scope
}

或使用with语句（虽然由于某些边缘情况不推荐）

$scope.addFunc = function() {
    with($scope) sum = a + b;
}

Answer 3

将值传递给控制器

<button ng-click="addFunc(a, b)">Sum</button>

CONTROLER

$scope.addFunc = function(a, b) {
    $scope.sum=a+b;
}

或

HTML：

<button ng-click="addFunc()">Sum</button>

控制器：

$scope.addFunc = function() { $scope.sum=$scope.a+$scope.b; }

Answer 4

Try this code

计算器

a: <input type="number" ng-model="a">
b: <input type="number" ng-model="b">
<button ng-click="addFunc()">Sum</button>
Sum : {{sum}}
<!-- <p><b>Summation:</b> {{sum = a + b}}</p> -->
<br/><br/><br/>
c: <input type="number" ng-model="c">
d: <input type="number" ng-model="d">
<p><b>Subtraction:</b> {{c - d}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sum = 0;
    $scope.addFunc = function() {
        $scope.sum=$scope.a+$scope.b;
    }
});
</script>
</body>
</html>

Answer 5

a和b位于$scope：

$scope.addFunc = function() {
    $scope.sum = $scope.a + $scope.b;
}

Answer 6

这是解决方案

jsfiddle

node_modules

Answer 7

试试这段代码：我们需要输入cast我们的变量，即ng-model值为数字，否则它将返回字符串。

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body ng-app="MyApp" ng-controller="myctrl">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"> </script> 
    
    <script>
        var app=angular.module("MyApp",[]);
        app.controller("myctrl",function($scope){
            $scope.value=0;
            $scope.add=function(){
            $scope.value=Number($scope.fnum)+   Number($scope.snum);
            };
            
        });
    </script>

    firstname:<input type="text" ng-model="fnum" placeholder="Enter value" /><br>
    lastname:<input type="text" ng-model="snum" placeholder="Enter value" /><br>
    <input type="button" value="Click" ng-click="add() " /><br>
    <div ng-repeat="a in res()">{{a}}</div>
    <div>{{value}}</div>
</body>
</html>

在angularJS onclick中添加两个数字

7 个答案:

计算器