Angular JS：使用ng-repeat计算每行两次的差异

I am newbie to angualr js.I am just trying to subtract the times between two columns and saved the result into third column of each row using ng-repeat.
Expected Output:

我是angualr js的新手。我只是想减去两列之间的时间,并使用ng-repeat将结果保存到每行的第三列。预期产出:

9:00   10:30   90(in minutes)

HTML:

<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.items">
    <td><input type="text" ng-model="item.start"></td>
    <td><input  type="text" ng-model="item.stop" ng-blur="diff()" ></td>
    <td><input  type="text" ng-bind="item.down" ></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>

Angualr js:

var mapp = angular.module('MyApp',[]);
mapp.controller('myCtrl',function($scope,$http){
 $scope.diff=function(){
                $scope.item.down=$scope.item.stop-$scope.item.start }
});

I unable to get the ng-model values from ng-repeat into controller.Whenever I will add the rows that function should be called.Please help me out.Thanks in advance.

我无法从ng-repeat到控制器中获取ng-model值。每当我要添加应该调用函数的行时。请帮助我。谢谢。

2 个解决方案

#1

You can try something like this:

你可以尝试这样的事情:

Note: This answer is based on assumption that time is accepted in 24hr format.

注意:此答案基于24小时格式接受时间的假设。

JSFiddle

function testCtrl($scope) {
  $scope.diff = "";
  $scope.$watch("startTime", function(newValue, oldValue) {
    $scope.diff = computeDiff(newValue, $scope.endTime);
  });
  $scope.$watch("endTime", function(newValue, oldValue) {
    $scope.diff = computeDiff($scope.startTime, newValue);
  });

  function computeDiff(startTime, endTime) {
    if (startTime && endTime) {
      var s_hr = startTime.split(":")[0] || 0;
      var s_min = startTime.split(":")[1] || 0;
      var e_hr = endTime.split(":")[0] || 0;
      var e_min = endTime.split(":")[1] || 0;

      return Math.abs((parseInt(e_hr) - parseInt(s_hr)) * 60) + Math.abs(parseInt(e_min) - parseInt(s_min))
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div ng-app>
  <div ng-controller="testCtrl">
    <input type="text" ng-model="startTime">
    <input type="text" ng-model="endTime">
    <input type="text" ng-model="diff">
  </div>
</div>

Following is the updated Fiddle using ng-blur and ng-repeat.

以下是使用ng-blur和ng-repeat更新的小提琴。

#2

I am curious as to why you want to use ngBlur for this? Instead just change:

我很好奇你为什么要使用ngBlur?而只是改变:

<td><input  type="text" ng-bind="item.down" ></td>

<td><input  type="text" ng-init="diff(item)">{{item.down}}</td>

And in your controller:

在你的控制器中:

$scope.diff = function(item) {
    item.down = convertToDateTime(item.stop) - convertToDateTime(item.start);
}

Here, convertToDateTime is a function that converts the input string to a date(but doesn't modify it!) and returns the timestamp. Since, you haven't specified the format of string so I leave the 'extracting date from the string' part to you.

这里,convertToDateTime是一个函数,它将输入字符串转换为日期(但不会修改它!)并返回时间戳。因为,您没有指定字符串的格式,所以我将“从字符串中提取日期”部分留给您。

#1