如何對前端輸入的值求和

Question

我的HTML頁面中有五個輸入元素：-

<div class="form-group">
  <label for="">Input 1</label>
  <input type="number" class="form-control" ng-model="input.value1">
  <label for="">Input 2</label>
  <input type="number" class="form-control" ng-model="input.value2">
  <label for="">Input 3</label>
  <input type="number" class="form-control" ng-model="input.value3">
  <label for="">Input 4</label>
  <input type="number" class="form-control" ng-model="input.value4">
</div>

在第五個輸入上，我想要前四個的總和：

<label for="">Total Value:-</label>
<input type="number" class="form-control" ng-model="input.total">

我想要的是，只要用戶在上述任何輸入元素中輸入值，其總和就會顯示在“ Total Value 。

我用指令代碼編寫了該函數：

 scope.totalDeposit = function(){
     scope.input.total = scope.input.value1 + scope.input.value2 + scope.input.value3 + scope.input.value4;
 }

 scope.totalDeposit();

我不希望此函數調用ng-blur。 另外，用戶可以輸入任意三個或兩個輸入值來獲得總和。 當前代碼未在前端顯示總和，有人可以建議我一些解決方案嗎？

Answer 1

ng-change方法並匯總值。

Answer 2

您可以使用ng-value達到效果

 angular.module('testapp', []) .controller('testController', [function() { var vm = this; vm.value1 = 0; vm.value2 = 0; vm.value3 = 0; vm.value4 = 0; vm.value5 = 0; }])

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> </head> <body ng-app="testapp"> <div ng-controller="testController as testCtrl"> <label for="">Input 1</label> <input type="number" class="form-control" ng-model="testCtrl.value1"> <label for="">Input 2</label> <input type="number" class="form-control" ng-model="testCtrl.value2"> <label for="">Input 3</label> <input type="number" class="form-control" ng-model="testCtrl.value3"> <label for="">Input 4</label> <input type="number" class="form-control" ng-model="testCtrl.value4"> <input type="number" class="form-control" ng-value="testCtrl.value1+testCtrl.value2+testCtrl.value3+testCtrl.value4" ng-model="testCtrl.value5"> </div> </body> </html>

Answer 3

當可以計算總數時，確實沒有理由存儲總數。 只需將<span>與ng-bind到$scope.input.total()的返回值，並且只要$scope.input的值發生更改，范圍中的值就會自動更新。 如果要從控制器內部以編程方式調用該函數，可以通過說var total = $scope.input.total()來完成。

外觀如下：

 var app = angular.module("myApp", []) .controller("myCtrl", function($scope) { $scope.input = { value1: "", value2: "", value3: "", value4: "", total: function() { return (+this.value1) + (+this.value2) + (+this.value3) + (+this.value4); } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div class="form-group"> <label for="">Input 1</label> <input type="number" class="form-control" ng-model="input.value1"> <br/><label for="">Input 2</label> <input type="number" class="form-control" ng-model="input.value2"> <br/><label for="">Input 3</label> <input type="number" class="form-control" ng-model="input.value3"> <br/><label for="">Input 4</label> <input type="number" class="form-control" ng-model="input.value4"> </div> <label for="">Total Value:</label> <span type="number" class="form-control" ng-bind="input.total()"></span> </div>

如何對前端輸入的值求和

問題描述

3 個解決方案

解決方案1
0 2017-06-14 16:18:44

解決方案2
0 2017-06-14 16:27:26

解決方案3
0 2017-06-14 16:34:15

如何對前端輸入的值求和

問題描述

3 個解決方案

解決方案1 0 2017-06-14 16:18:44

解決方案2 0 2017-06-14 16:27:26

解決方案3 0 2017-06-14 16:34:15

解決方案1
0 2017-06-14 16:18:44

解決方案2
0 2017-06-14 16:27:26

解決方案3
0 2017-06-14 16:34:15