对象数组AngularJS中的属性总和

时间:2017-06-07 05:08:44

标签: javascript angularjs arrays object

我对angularjs和javascript都很新,需要一些指导。我正在创建一个记录项目时间日志的应用程序。其中一列需要增量时间 - 启动日志和完成日志之间的时间差并消除间隔时间(例如,如果我在下午1点开始项目,在下午3点完成,但在增量时间之间有30分钟休息时间是2& 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;

  ;
 }
}]);

1 个答案:

答案 0 :(得分:0)

试试这个

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