Javascript angularJS onclick中两个数字的相加_Javascript_Jquery_Angularjs

Javascript angularJS onclick中两个数字的相加

javascript jquery angularjs

Javascript angularJS onclick中两个数字的相加,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我试图添加两个数字，只想在单击按钮时显示结果。下面是我的代码： <!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

我试图添加两个数字，只想在单击按钮时显示结果。下面是我的代码：

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


计算器
a:
b:
总和
总和：{{Sum}




c:
d:
减法：{c-d}
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.sum=0；
$scope.addFunc=函数（）{
$scope.sum=a+b；
}
});

将值传递给控制器

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

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

或

HTML:

计算器

a:
b:
总和
总和：{{Sum}




c:
d:
减法：{c-d}
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.sum=0；
$scope.addFunc=函数（）{
$scope.sum=$scope.a+$scope.b；
}
});
a
和b
在$scope
中：
$scope.addFunc = function() {
    $scope.sum = $scope.a + $scope.b;
}

这是解决办法

当您将a&b编写为ng模型时，它们将自动连接到$scope对象
所以，如果你想添加它们，你只需要写
$scope.a + $scope.b

如果您尝试从此函数访问a
和b
，它将查看此函数的词法范围。因为你没有在那里声明变量，所以它不起作用。在angular维护的自定义$scope
（只是一个javascript对象）中，没有在作用域链的任何位置声明变量。Angular使用其自己的注入控制器的$scope
来访问您必须通过$scope.
本身访问的范围。想法是在模板（视图）和函数（控制器）之间共享
在您的模板中，a+b
起作用，因为angular对模板中使用的所有变量在内部使用$scope
，所以您不必在那里添加$scope

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

或者使用this
，因为该函数是使用$scope
调用的，并且将具有隐式引用
$scope.addFunc = function() {
    this.sum= this.a + this.b; //when calling $scope.addFunc() this will be $scope
}

或将与
语句一起使用（尽管由于某些边缘情况，不建议使用）
尝试以下代码：我们需要将变量（即ng模型值）类型转换为数字，否则它将返回字符串


在此处插入标题
var-app=angular.module（“MyApp”，[]）；
app.controller（“myctrl”，函数（$scope）{
$scope.value=0；
$scope.add=函数（）{
$scope.value=Number（$scope.fnum）+Number（$scope.snum）；
};
});
名字：

姓氏：



{{a}
{{value}}
$scope.sum=$scope.a+$scope.b是的…它工作了。。！非常感谢。你的知识是惊人的…谢谢你的准确回答explanation@Pradeep我接受/同意你的回答。如果有任何官方方式来接受/批准答案，请让我知道，因为我是新手。我接受/批准你的答案。如果有任何官方方式接受/批准答案，请让我知道，因为我是新手。
$scope.addFunc = function() {
    $scope.sum = $scope.a + $scope.b;
}

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.sum = 0;
    $scope.addFunc = function() {
        $scope.sum=$scope.a+$scope.b;
    }

$scope.a + $scope.b

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

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

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

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

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