CODEWITHSUNDEEP
javascriptangularjscheckbox
Joanna
Joanna

Reputation: 289

AngularJS - How to display dates in ng-repeat

I am working on a app that tracks activity by day. This is why I need to display particular number of checkboxes with dates next to them. I have starting date and would like it to increase with every checkbox. So when starting date is 26 April, I should have 27 April next to second checkbox, 28 next to third etc. I have created a service that fetches data (it gets the list from localStorage), new items can be added using a form as well, where starting date and number of checkoboxes should be chosen. What is the best way to increase the date that stands next to checkboxes? For now my template looks like this:

<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>

I would like to have date where {{item.startDate}} is now. This is how the component for that template looks like:

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));
    }
}]

If you would like to understand what I am looking for, here is app demo https://joannabochynska.github.io/HabitTracker/app/#/.

In the Demo section I would like to have checkboxes with dates instead only checkboxes. Hope it's clear :)

Upvotes: 1

Views: 565

Answers (2)

Jordi Ruiz
Jordi Ruiz

Reputation: 487

Momentjs is great for date manipulation, however you don't need it if you just want to format a date in angular. You can use the date filter.

You can see examples here:

https://docs.angularjs.org/api/ng/filter/date

Upvotes: 2

Julien TASSIN
Julien TASSIN

Reputation: 5212

The best way date manipulation in js is momentjs.

You can add easilly days to a date this way : 

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

To use it as a directive you can use angular-moment in order to add days to your date.

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

Upvotes: 2

Related Questions