javascript - AngularJS - 如何在 ng-repeat 中显示日期

Question

我正在开发一个按天跟踪事件的应用程序。这就是为什么我需要显示特定数量的复选框以及旁边的日期。我有开始日期，并希望随着每个复选框的增加而增加。因此，当开始日期是 4 月 26 日时，我应该在第二个复选框旁边有 4 月 27 日，在第三个复选框旁边有 28 日等。我创建了一个获取数据的服务(它从 localStorage 获取列表)，可以使用以下形式添加新项目好吧，应该选择开始日期和复选框的数量。增加复选框旁边日期的最佳方法是什么？现在我的模板看起来像这样:

<div class="to-check" ng-repeat="n in item.daysArray track by $index">
    <label><b>{{item.startDate}}</b></label>
    <input ng-change="$ctrl.refreshItem(item,$index)" ng-model="item.daysArray[$index]" type="checkbox">
</div>

我想知道 {{item.startDate}} 现在的日期。该模板的组件如下所示:

controller: ['ListService', function (ListService) {
    this.listService = ListService;
    var list = localStorage.getItem('list');
    if (list != null && list.length >= 0) {
        var obj = JSON.parse(list);
        for (var i = 0; i < obj.length; i++) {
            obj[i].startDate = new Date(obj[i].startDate);
        }
        //console.log(obj);
        this.listService.saveList(obj);
    }

    this.addItem = function (newItem) {
        var item = {
            name: newItem.name,
            startDate: new Date(newItem.startDate),
            days: newItem.days,
            daysCompleted: 0
        };
        this.listService.addItem(item);
        this.save();
    };

    this.list = ListService.getList();
    this.refreshItem = function (item, index) {
        if (item.daysArray[index]) {
            item.daysCompleted++;
            this.save();
        } else {
            item.daysCompleted--;
            this.save();
        }

    };

    this.save = function () {
        var currentList = ListService.getList();
        localStorage.setItem('list', JSON.stringify(currentList));
    }
}]

如果您想了解我在寻找什么，这里是应用程序演示 https://joannabochynska.github.io/HabitTracker/app/#/ .

在演示部分，我希望有带日期的复选框，而不是只有复选框。希望它很清楚:)

Answer 1

js中日期操作的最佳方式是momentjs .

您可以通过这种方式轻松添加日期:

// Will add n days to your date and return a js Date
moment(yourJsDate).add(n, 'days').toDate()

要将其用作指令，您可以使用 angular-moment为了给你的约会增加天数。

<span>{{item.startDate | amAdd : $index : 'days' | amDateFormat:'amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a''}}</span>