在Angular JS中添加在键盘输入事件中输入框中输入的数字

Question

我希望显示在输入框中输入的四个值的加法

<td><input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one"></td>
<td><input type="text"  style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two"></td>
<td><input type="text"  style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three"></td>
<td><input type="text"  style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></td>

这是我的js

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.getkeys = function (event) {


if($scope.one==='' || $scope.two==='' || $scope.three==='' || $scope.four==="" )
{
  $scope.one=parseInt("0");
  $scope.two=parseInt("0");
  $scope.three=parseInt("0")
  $scope.four=parseInt("0")
}

$scope.keyval = parseInt($scope.one)+parseInt($scope.two)+parseInt($scope.three)+parseInt($scope.four);


console.log($scope.keyval);
}
});

我想要的是只要有人在输入框中输入值，就会显示所有四个值的总和，问题是，如果用户首先在任何显示框的值中输入数值，则显示NaN，直到所有四个值都输入了，然后才知道如何实现这一目标？ 以及如何知道已输入哪个ng-model值，就像js中的this.value

Answer 1

这是因为其他字段为空＆尝试parseInt＆添加一个空字段值将导致NaN 。或者，如果字段为空，则可以传递0

 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.getkeys = function(event) { if ($scope.one === '' || $scope.two === '' || $scope.three === '' || $scope.four === "") { $scope.one = parseInt("0"); $scope.two = parseInt("0"); $scope.three = parseInt("0") $scope.four = parseInt("0") } $scope.keyval = parseInt(($scope.one) || 0, 10) + parseInt($scope.two || 0, 10) + parseInt($scope.three || 0, 10) + parseInt($scope.four || 0, 10); console.log($scope.keyval); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one"> <input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two"> <input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three"> <input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></div> </div> 

Answer 2

• 您不需要绑定keyUp事件，angularjs会对我们有用。
• 初始化模型one控制器内。
• 创建一个函数，即getTotal()
• 使用对象Number将输入的值转换为数字。

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.getTotal = function() { return Number($scope.one) + Number($scope.two) + Number($scope.three) + Number($scope.four) }; $scope.one = 22; $scope.two = 0; $scope.three = 0; $scope.four = 0; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" style="width:60px;margin:6px;" ng-model="one"> <input type="text" style="width:60px;margin:6px;" ng-model="two"> <input type="text" style="width:60px;margin:6px;" ng-model="three"> <input type="text" style="width:60px;margin:6px;" ng-model="four"> <p>Total</p> <span>{{getTotal()}}</span> </div> 

Answer 3

@Ele代码的最小修改。 将输入类型从文本更改为数字，以方便按键事件并禁止输入字符

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.getTotal = function() { return Number($scope.one) + Number($scope.two) + Number($scope.three) + Number($scope.four) }; $scope.one = 22; $scope.two = 0; $scope.three = 0; $scope.four = 0; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <input type="number" style="width:60px;margin:6px;" ng-model="one"> <input type="number" style="width:60px;margin:6px;" ng-model="two"> <input type="number" style="width:60px;margin:6px;" ng-model="three"> <input type="number" style="width:60px;margin:6px;" ng-model="four"> <p>Total</p> <span>{{getTotal()}}</span> </div>