CODEWITHSUNDEEP
angularjsangularjs-ng-repeatng-animate
Lukas
Lukas

Reputation: 164

Sliding animation when updating an array in AngularJS

I'm developing a date-picker based on AngularJS. The HTML is quite simple:

<div class="calendar-slider-actions">
   <a class="slider-prev" ng-click="vm.prevWeek()">
     <i class="ico ico-arrow-left"></i>
   </a>

   <div class="slider-clip">
      <ul class="slides">
        <li class="slide" data-ng-repeat="date in vm.dates">
           <div class="radio">
             <input type="radio" name="group-days" id="field-{{date.weekDay | lowercase}}" ng-value="vm.selectedDate" ng-checked="vm.selectedDate === date.date">
             <label class="btn btn-primary btn-primary-alpha radio-label" for="field-{{date.weekDay | lowercase}}" ng-click="vm.selectDate(date)">
             <strong>{{date.weekDay}}</strong> {{date.shortDate}}
             </label>
          </div>
        </li>
       </ul>
     </div>
    <a class="slider-next" ng-click="vm.nextWeek()">
      <i class="ico ico-arrow-right"></i>
    </a>
 </div>

Styled correctly this gives me something like this

enter image description here

The dates are generated on the fly in the controller and only seven at the time are generated. Once I click left or right the next seven dates are calculated, the array is updated and the GUI is refreshed as well with the new dates. So far so good.

The controller looks like this:

function DayPickerCtrl($scope) {
var vm = this;

vm.selectedDate = moment().startOf('day').format();
_changeDisplayedWeek(0);

vm.selectDate = function(date) {
    vm.selectedDate = date.date;
};

vm.nextWeek = function() {
    _changeDisplayedWeek(7);
};

vm.prevWeek = function() {
    _changeDisplayedWeek(-7);
};

function _changeDisplayedWeek(daysToAdd) {
    var selectedDate = moment(vm.selectedDate).add(daysToAdd, 'days');
    vm.selectedDate = selectedDate.format();
    vm.weekOfYear = selectedDate.format('WW');
    vm.dates = _expandWeek(selectedDate);
};

function _expandWeek(startDate) {   
    var dates = [];
    var dayOfWeek = moment(startDate).startOf('isoweek');
    for (var i = 0; i<7; i++) {
        dates.push({ weekDay: dayOfWeek.format('dd'), shortDate: dayOfWeek.format('DD.MM'), date: dayOfWeek.format() });
    dayOfWeek.add(1, 'd');
}

    return dates;
};

The problem I'm facing is that I'm not able to animate during the dates update. As intended it would be very cool if the dates could slide either left or right. I did try to achieve this with ng-animate but I couldn't figure out how to.

Here's a basic example of the date picker: https://plnkr.co/edit/4Oz0RBvJafiTm6ZAfidt?p=preview

Any ideas on how to get this to work?

Regards and thanks in advance Lukas

Upvotes: 2

Views: 719

Answers (1)

null
null

Reputation: 7926

Sometimes using angular-animate can be tricky. Looking at your markup I'm assuming you want to slide each radio button individually (maybe to throw in some staggering effects). The problem with angular-animate it does not maintain the order of the items in the list that are marked as ng-leave. In this case the (to be deleted) items are appended to the end of the <ul><li></li></ul>, which screws the relative position.

Have a look into this plunker. I've quickly eyeballed the styling from the image, so you'll probably want to tweak it a bit.

Cheers.

Upvotes: 1

Related Questions