Question

我的HTML页面中有五个输入元素： -

<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();中。

我在我的指令代码中写了这个函数：

// env.js
module.exports = { env: process.env };

我不希望此功能调用ng-blur。此外，用户可以在任何三个或两个输入中输入值，并获得总和。目前的代码没有在前端显示总和。谁能建议我一些解决方案？

Answer 1

ng-change方法并总结这些值。

Answer 2

你可以使用ng-value来达到效果

＆＃13;

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

＆＃13;

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

＆＃13;

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 个答案: