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

这是因为其他字段是空的＆amp;试图解析I＆amp;添加一个空字段值将导致NaN。或者，如果字段为空，则可以传递0

＆＃13;

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);
  }
});

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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;
});

＆＃13;

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

＆＃13;

Answer 3

对@Ele代码进行Minior修改。将输入类型从文本更改为数字以方便键入事件并禁用要输入的字符

＆＃13;

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;
});

＆＃13;

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

＆＃13;

使用角度js中的keyup事件添加在输入框中输入的数字

3 个答案: