Question

我是Angular js的新手。我正在尝试计算第三列的值的总和，并将结果保存到停机时间框中在这里，我已经完成了。
1.动态添加/删除行 2.计算第1列和第2列之间的差异，并将结果保存到第3列 3.现在，将第三列的值相加并保存到文本框中现在，第三点不起作用。

HTML：

<!doctype html>
<html ng-app="Myapp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-controller="myctrl">

    <table id="t1" style="border:none;">
    <tr><th>Start</th><th>Stop</th><th>Downtime(In Min)</th><th>Reason</th></tr>
        <tr ng-repeat="item in invoice">
    <td><input  type="text" required ng-model="$invoice.start" name="r1[]"></td>
    <td><input type="text" required ng-model="$invoice.stop" ng-blur="diff($invoice)" name="r2[]"></td>
    <td><input  type="text" name="r3[]"  ng-model="$invoice.diff"/></td>
    <td><input  type="text" ng-model="$invoice.reason" name="r4[]" ></td>
    <td style="border:none;"><a href ng-click="remove(item)">X</a></td>
    </tr>
    <tr style="border:none;">
    <td style="border:none;"><a href ng-click="add()">+</a></td>
  </tr>
    </table>
    <br/>
    <div> 
<span class="labelCode">Total Downtime</span><input required type="text" ng-value="run()" name="Tot_D" /></span></br>

</div>

Angular js

    var myapp=angular.module("Myapp",[]);
    myapp.controller("myctrl",function($scope){

     $scope.invoice =  [{
            start :"7:00",
            stop:"7:30" ,
            reason: "M/C Ready to Start",
               }]


                 $scope.add= function(){
                             $scope.invoice.push({
                             start:"7:30",
                             stop:"8:00"
                      });
                };
           //Remove the rows
                 $scope.remove=function(index){
                       $scope.invoice.splice(index,1);
                  };

                    $scope.diff = function(item) {
        item.diff = computeDiff(item.start,item.stop);
      }
  function computeDiff(start, stop) {
        if (start && stop) {
          var s_hr = start.split(":")[0];
          var s_min = start.split(":")[1];
          var e_hr = stop.split(":")[0];
          var e_min = stop.split(":")[1];

          return Math.abs((parseInt(e_hr) - parseInt(s_hr)) * 60) + Math.abs(parseInt(e_min) - parseInt(s_min))
        }
      }
                  $scope.run = function(){

      var total = 0;
        for(var i = 0; i < $scope.invoice.length; i++){
            var product = $scope.invoice[i];
            total += parseInt($scope.diff());
        }
        return total; 
    }

    });

第三列的重复值总和未更新为停机时间文本框。
我不会在哪里出错。请帮帮我。谢谢你。

Answer 1

首先，我建议您为每个迭代计算ng-init指令，但非常重要使用ng-init内的函数。像这样：

<tr ng-repeat="item in invoice">
  <td><input type="text" ... ng-init="sum(item)"></td>
</tr>

然后在你的控制器里面你可以定义那个功能并随心所欲，因为ng-repeat 将为每次迭代调用 该函数

Angular JS-使用ng-repeat

1 个答案: