Question

我有一张桌子，当用户输入每个单元格中的每个值时，用户将在字段中输入数据，最后一个单元格需要使用其总数进行更新。有了这个片段，我得到了45+90+36。我用jQuery知道它很简单，但我想在Angular中尽可能简单。

<tr>
  <td rowspan="4"><span class="textRotate">TESTING</span>
  </td>
  <td>XXXX</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPrevention">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxAppraisal">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxInternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxxExternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPerformance">NA</td>
  <td ng-model="tableVal.xxxTotal">{{tableVal.xxxxPrevention + tableVal.xxxxAppraisal}}</td>
  <td>%</td>
</tr>

Answer 1

您有两种选择：

解决方案1：

您可以将type input改为number而不是text（对于HTML 5）：

<tr>
  <td rowspan="4"><span class="textRotate">TESTING</span>
  </td>
  <td>XXXX</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxPrevention">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxAppraisal">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxInternalFailure">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxxExternalFailure">$</td>
  <td>
    <input id="testingInput" type="number" ng-model="tableVal.xxxxPerformance">NA</td>
  <td>{{tableVal.xxxxPrevention + tableVal.xxxxAppraisal}}</td>
  <td>%</td>
</tr>

解决方案2 ：

在求和之前使用parseInt()方法：

<td>{{parseInt(tableVal.xxxxPrevention) + parseInt(tableVal.xxxxAppraisal)}}</td>

Answer 2

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="">
<tr>
  <td rowspan="4"><span class="textRotate">TESTING</span>
  </td>
  <td>XXXX</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPrevention">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxAppraisal">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxInternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxxExternalFailure">$</td>
  <td>
    <input id="testingInput" type="text" ng-model="tableVal.xxxxPerformance">NA</td>
  <td ng-model="tableVal.xxxTotal">{{ (tableVal.xxxxPrevention|number) -- (tableVal.xxxxAppraisal|number)}}</td>
  <td>%</td>
</tr>
  </div>

＆＃13;

希望这有帮助。

Answer 3

为什么不使用$scope.$watch()。

实施例

$scope.$watch('tableVal', function (nV, oV) {
    // nV == new value, oV == old value
    if (nV != oV) {
        // Run some function here to update total and assign it to $scope.property
    }
}, true)

Answer 4

使用$scope上的方法通过将ng-model传递给该方法来计算数字：

$scope.tableVal.xxxtotal = function(){
    return (+$scope.tableVal.xxxxPrevention) + (+$scope.tableVal.xxxxAppraisal);
}

并在视图中更新此td：

<td>{{ tableVal.xxxTotal(); }}</td>

在ng-model上使用td指令是没用的。那只应该用在输入元素上。

一个简单的测试片段：

var app = angular.module('myapp', []);

app.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.obj = {
      test1: "",
      test2: "",
      total:function(){
         return (+$scope.obj.test1) + (+$scope.obj.test2);
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app='myapp' ng-controller='appCtrl'>
  <input type='text' ng-model='obj.test1'>
  <input type='text' ng-model='obj.test2'>
  <pre>{{ obj.total(); }}</pre>
</div>

AngularJS - 动态添加表格行中的所有值

4 个答案: