如何在angularjs中的每个ng-repeat循环上添加日期变量

时间:2017-07-25 12:02:49

标签: angularjs angularjs-ng-repeat angularjs-ng-init

我在“ng-init”指令中设置了日期变量,我希望在每个ng-repeat循环中为这个日期变量添加天数,如下所示:

<table>
  <tr ng-repeat="n in myArr" ng-init="myDate=('07/25/2017'|date:addDays($index))">
    <td ng-bind="myDate"></td>
  </tr>
</table

1 个答案:

答案 0 :(得分:4)

您可以在控制器中实例化您的第一个日期,如下所示:

$scope.firstDate = new Date('07/25/2017');

并在 ngRepeat 中添加天数,如下所示:

<tr ng-repeat="n in myArr" ng-init="myDate=(firstDate.setDate(firstDate.getDate() + 1)|date)">

如果您希望日期的格式为 mm / dd / yyyy ,则需要在 ngInit :'M/d/yyyy'的末尾添加,如下所示(您可以查看the doc以获取有关日期格式的更多信息):

<tr ng-repeat="n in myArr" ng-init="myDate=(firstDate.setDate(firstDate.getDate() + 1)|date:'M/d/yyyy')">

但如果你还有其他关于日期的事情,我认为看看moment.js

是个好主意。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.firstDate = new Date('07/25/2017');
  $scope.myArr = [1, 2, 3, 4, 5];
});
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>

<table ng-app="plunker" ng-controller="MainCtrl">
  <tr ng-repeat="n in myArr" ng-init="myDate=(firstDate.setDate(firstDate.getDate() + 1)|date)">
    <td ng-bind="myDate"></td>
  </tr>
</table>