如何總結的前端從輸入值

我在我的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-模糊調用。另外，用戶可以在他得到總和的任何三個或兩個輸入中輸入值。目前的代碼沒有顯示前端的總和。任何人都可以給我提供一些解決方案嗎？

來源

2017-06-14 shreya gupta

NG-變化和總結值.. – Maccurt

ng-change方法並總結這些值。

來源

2017-06-14 16:18:44 Maccurt

你介意展示一些代碼來展示你的想法嗎？ – mhodges

可以使用NG-值達到的效果

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>

來源

2017-06-14 16:27:26 user93

輸入值是字符串，所以結果將是一個串聯，而不是總和 – pwolaq

我認爲他們正在取得總和請嘗試代碼示例 – user93

我沒有注意到'類型=數字'這是由Angular處理不同，你是對的 – pwolaq

實在沒有理由來存儲時，總可以計算出它。只需將<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>

來源

2017-06-14 16:34:15 mhodges

如何總結的前端從輸入值

回答

相關問題