Question

我有这样的动态表单字段：

<div ng-repeat="wspStaffTbl in staff_codes">
     {{wspStaffTbl.Staff_Type}}
     <input type="text" ng-model="wspStaffTbl.Permanent" ng-change="updateTotal()">
     <input type="text" ng-model="wspStaffTbl.Contract" ng-change="updateTotal()">
     <input type="text" ng-model="wspStaffTbl.Total">
</div>

我的数据库收集staff_codes的位置。每当用户在wspStaffTbl.Permanent或wspStaffTbl.Contract中输入值时，我想将每个永久合约和合约相加并将其总计为总计。

我试过这个

<input type="text" ng-value="(wspStaffTbl.Permanent)--(wspStaffTbl.Contract)" ng-model="wspStaffTbl.Total">

它工作正常，但如果字段已经有一些数据（例如编辑形式），它将不会更新总数。所以我需要在我的控制器中使用它：

$scope.updateTotal= function(){
       $scope.wspStaffTbl.Total =  $scope.wspStaffTbl.Permanent + $scope.wspStaffTbl.Contract;
    }

Answer 1

你有两个问题

（i）将输入类型从文本更改为数字

  <div ng-controller="app.invoice" class="container">
  <div ng-repeat="wspStaffTbl in staff_codes">
     {{wspStaffTbl.Staff_Type}}
     <input type="number" ng-model="wspStaffTbl.Permanent" ng-change="updateTotal(wspStaffTbl)">
     <input type="number" ng-model="wspStaffTbl.Contract" ng-change="updateTotal(wspStaffTbl)">
     <input type="number" ng-model="wspStaffTbl.Total">
</div>

（ii）将变量传递给ng-change并将其添加到总数

$scope.updateTotal= function(val){
        val.Total =  val.Permanent + val.Contract;
    }

<强> DEMO

Answer 2

正如在一个答案中建议并从中引用，如果您使用数字字段，则很容易计算字段的总和。

正如你所说，你得到的问题，

“它工作正常，但如果字段已经有一些数据（例如编辑形式），则不会更新总数”

我的回答主要解决您在编辑时遇到的问题，使用输入值初始化总值。

这可以通过使用total field初始化ng-init来解决。

<强> ng-init="updateTotal(code)"

这是已解决的片段，

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="code in staff_codes">
     <input type="number" ng-model="code.Permanent" ng-change="updateTotal(code)">
     <input type="number" ng-model="code.Contract" ng-change="updateTotal(code)">
     <input type="number" ng-model="code.Total" ng-init="updateTotal(code)">
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.code = {}

  $scope.staff_codes = [{
    name: 'Test',
    Permanent: 10,
    Contract: 20,
    Total:0
  }, {
    name: 'Obama',
    Permanent: 15,
    Contract: 35,
      Total:0
  }, {
    name: 'Trump',
    Permanent: 35,
    Contract: 55,
      Total:0
  }]; 

$scope.updateTotal= function(code){

        code.Total =  code.Permanent + code.Contract

    }


});
</script>

</body>

Here is the fiddle

在ng-repeat和sum列中的AngularJS表单字段

2 个答案: