對象數組中的屬性之和AngularJS

Question

我對angularjs和javascript都相當陌生，需要一些指導。我正在製作一個記錄項目時間記錄的應用程序。其中一列需要增量時間 - 開始日誌和完成日誌並消除間隔時間之間的時間差（例如，如果我在下午1點開始項目，下午3點結束，但在德爾塔時間之間有30分鐘的中斷時間1/2小時）。 這是我的代碼到目前爲止，無論我嘗試做或者出現錯誤的時間或NaN。任何幫助，將不勝感激！

查看：

<div class="main" ng-controller="MainController"> 
    <div class="container-fluid"> 

    <div class="header"> 
    <div class="container-fluid"> 
    <h1>{{ title }}</h1> 
    </div> 
</div> 

    <div class="row container-fluid"> 
     <!--<div class="col-md-4">--> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <!--<<form ng-submit="addNew(timeLogs)" >--> 
        <form> 

         <div class="form-group col-md-6"> 
          <label>Project</label> 
          <input type="text" class="form-control" placeholder="Project" ng-model="project" > 
         </div> 

         <div class="form-group col-md-6"> 
          <label>Phase</label> 
          <input type="text" class="form-control" placeholder="Phase" ng-model="phase" > 
         </div> 

         <div class="form-group col-md-6"> 
          <label>Date</label> 
          <input type="date" class="form-control" placeholder="dd-MM-yyyy" ng-model="date" > 
         </div> 

         <div class="form-group col-md-6"> 
          <label>Start Time</label> 
          <input type="time" class="form-control" placeholder="HH:mm:ss" ng-model="startTime" required> 
         </div> 

         <div class="form-group col-md-6"> 
          <label>Interval Time (mins)</label> 
          <input type="text" class="form-control without" placeholder="Int Time" ng-model="intTime" > 
         </div> 

         <div class="form-group col-md-6"> 
          <label>End Time</label> 
          <input type="time" class="form-control" placeholder="HH:mm:ss" ng-model="endTime" required> 
         </div> 

         <div class="form-group col-md-6"> 
          <label>Comments</label> 
          <input type="text" class="form-control" placeholder="Comments" ng-model="comments" > 
         </div> 


          <button ng-click="addLog()">Add</button> 

        </form> 
       </div> 
      </div> 
     <!--</div>--> 
    </div> 

    <table class="table table-striped col-md-4"> 
     <tr> 
     <th>Project</th> 
     <th>Phase</th> 
     <th>Date</th> 
     <th>Start Time</th> 
     <th>Int Time (mins)</th> 
     <th>Stop Time</th> 
     <th>Delta Time</th> 
     <th>Comments</th> 
     <th>Make Changes</th> 
     </tr> 
     <tr data-ng-repeat="log in logs"> 
     <td>{{ log.project }}</td> 
     <td>{{ log.phase }}</td> 
     <td>{{ log.date | date:'dd/MM/yyyy' }}</td> 
     <td>{{ log.startTime | date:'hh:mma' }}</td> 
     <td>{{ log.intTime }}</td> 
     <td>{{ log.endTime | date:'hh:mma' }}</td> 
     <td>{{ log.startTime -- log.endTime | date:'hh:mma' }}</td> 
     <td>{{ log.comments }}</td> 
     <td> 
      <button class="btn btn-primary" ng-click="main.editClickHandler(item)">Edit</button> 
      <button class="btn btn-danger" ng-click="main.removeClickHandler(item)">Remove</button> 
     </td> 
     </tr> 
    </table> 

    </div> 
</div> 


<!-- Modules --> 
<script src="js/app.js"></script> 

<!-- Controllers --> 
<script src="js/controllers/MainController.js"></script> 

控制器：

app.controller('MainController', ['$scope', function($scope) { 
$scope.title = 'Time Log'; 
//$scope.promo = 'The most popular books this month.'; 

$scope.logs = []; 

$scope.addLog = function() { 

    $scope.logs.push({ 
    project: $scope.project, 
    phase: $scope.phase, 
    date: $scope.date, 
    startTime: $scope.startTime, 
    intTime: $scope.intTime, 
    endTime: $scope.endTime, 
    comments: $scope.comments 
    }); 

    // Clear input fields after push 
    $scope.project = ""; 
    $scope.phase = ""; 
    $scope.date = ""; 
    $scope.startTime = ""; 
    $scope.intTime = ""; 
    $scope.endTime = ""; 
    $scope.comments = ""; 
}; 

$scope.deltaTime = function(logs) { 

    return $scope.startTime - $scope.endTime; 

    ; 
} 
}]); 

Answer 1

嘗試這樣

$scope.deltaTime = function(logs) { 
     return new Date($scope.startTime) - new Date($scope.endTime); 
    }