Question

这是我的HTML

<div data-ng-app="">

<p>Enter a value: <input type="text" ng-model="valueOne" value=""></p>
<p> the first value you typed is: <span data-ng-bind="valueOne"></span> </p>

<p> Age: <input type="text" ng-model="valueTwo" value=""></p>
<p> the first value you typed is: <span data-ng-bind="valueTwo"></span> </p>



<p> The sum of the values is: {{addValues()}}</p>
</div>

这是我的JS

<script>

function addValues($scope){

$scope.Math = window.Math;
valueOne + valueTwo;
}
</script>

需要做些什么来获得所需的答案？到目前为止，我只能将字符串连接起作用，但我希望能够在输入2和4时给出答案6而不是当前给出的答案是24。

Answer 1

首先你的函数需要return语句，它应返回结果，你在哪里定义这个函数，从哪里得到这个$ scope。因为如果你想使用这样的函数你需要将它绑定到$ scope，如$ scope.addValues = function（）{}

所以例如在你的角度控制器里面你会有

$scope.addValues = function() {
    return $scope.valueOne + $scope.valueTwo;
}

Answer 2

为什么在添加？

之前不尝试将值解析为整数？

parseInt(valueOne) + parseInt(valueTwo)

Answer 3

不理想，但您可以将最后一部分更改为：

<p>The sum of the values is: {{valueOne*1 + valueTwo*1}}</p>

这会强制将valueOne和ValueTwo表示为添加的数字。

或者，设置一个控制器......

var myApp = angular.module('myApp',[]);

    myApp.controller('ctrlAdd', ['$scope', function($scope) {
      $scope.valueOne = 0;
      $scope.valueTwo = 0;

      $scope.result = function(){
        return parseInt($scope.valueOne) + parseInt($scope.valueTwo);
      }
    }]);

并更改HTML ...

   <body>
  <div data-ng-app="myApp" ng-controller="ctrlAdd">
    <p>Enter a value:
      <input type="text" ng-model="valueOne" value="" />
    </p>
    <p>the first value you typed is: <span data-ng-bind="valueOne"></span>
    </p>
    <p>Age:
      <input type="text" ng-model="valueTwo" value="" />
    </p>
    <p>the first value you typed is: <span data-ng-bind="valueTwo"></span>
    </p>
    <p>The sum of the values is: {{result()}}</p>
  </div>
</body>

请参阅Plunker

Answer 4

可以试试这个：

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div data-ng-app="" data-ng-controller="addValues">

<p>Enter a value: <input type="text" data-ng-model="valueOne" value="0"></p>
<p> the first value you typed is: <span data-ng-bind="valueOne"></span> </p>

<p> Age: <input type="text" data-ng-model="valueTwo" value="0"></p>
<p> the first value you typed is: <span data-ng-bind="valueTwo"></span> </p>



<p> The sum of the values is: {{sum()}}</p>
</div>


<script>

function addValues($scope){
    $scope.valueOne=0;
    $scope.valueTwo=0;
     $scope.sum = function() {
            return parseInt($scope.valueOne)+parseInt($scope.valueTwo);
        }


}
</script>

</body>
</html>

如何使用角度js一起添加2个值？

4 个答案: