mercredi 26 avril 2017

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 27April 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></b></label>
    <input ng-change="$ctrl.refreshItem(item,$index)" ng-model="item.daysArray[$index]" type="checkbox">
 </div>

I would like to have date where 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 http://ift.tt/2plHkir. In the Demo section I would like to have checkboxes with dates instead only checkboxes. Hope it's clear :)




Aucun commentaire:

Enregistrer un commentaire