Javascript 对象数组AngularJS中的属性之和
我对angularjs和javascript都相当陌生，需要一些指导。我正在制作一个记录项目时间日志的应用程序。其中一列需要是delta time—开始日志和完成日志之间的时间差，以及删除间隔时间（例如，如果我在下午1点开始一个项目，在下午3点结束，但中间有30分钟的休息时间，则delta time将为2&1/2小时）。 这是我到目前为止的代码，无论我尝试做什么，要么出现错误的时间，要么出现错误。任何帮助都将不胜感激Javascript 对象数组AngularJS中的属性之和,javascript,angularjs,arrays,object,Javascript,Angularjs,Arrays,Object,我对angularjs和javascript都相当陌生，需要一些指导。我正在制作一个记录项目时间日志的应用程序。其中一列需要是delta time—开始日志和完成日志之间的时间差，以及删除间隔时间（例如，如果我在下午1点开始一个项目，在下午3点结束，但中间有30分钟的休息时间，则delta time将为2&1/2小时）。 这是我到目前为止的代码，无论我尝试做什么，要么出现错误的时间，要么出现错误。任何帮助都将不胜感激 <div class="main" ng-controller="Mai
<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>
<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>
<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>
<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>
<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>
<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>
$scope.deltaTime = function(logs) {
return new Date($scope.startTime) - new Date($scope.endTime);
}
<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>
$scope.deltaTime = function(logs) {
return new Date($scope.startTime) - new Date($scope.endTime);
}
返回为null-它似乎无法在单独的函数中读取$scope.startTime或$scope.endTime？返回为null-它似乎无法在单独的函数中读取$scope.startTime或$scope.endTime？