digest issue with ng-form with validators on a ng-repeat when using ng-animate on 1.4.1

[jlowcs]

When there is a ng-form directive on a ng-repeat directive, and there are validations in fields inside that form, the deletion of an element in the list is not reflected in the ng-repeat.

http://plnkr.co/edit/Er0thSHyCg0s2lvGO8SP

    <div ng-controller="MyCtrl as myCtrl">
      list length: {{myCtrl.list.length}}
      <div ng-form ng-repeat="elt in myCtrl.list track by elt.id">
        <input required ng-model="elt.text">
        <button ng-click="myCtrl.deleteElt($index)">delete</button>
      </div>
      <button ng-click="myCtrl.addElt()">add</button>
    </div>

(ng-form and ng-repeat are on the same element)

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

var cpt = 0;

app.controller('MyCtrl', function ($scope, $element) {
  this.list = [];
  for (var i = 0; i < 6; ++i) {
    this.list.push({
      text: 'Elt ' + i,
      id: ++cpt
    });
  }

  var _this = this;

  this.deleteElt = function (index) {
    _this.list.splice(index, 1);
  }
  this.addElt = function (index) {
    _this.list.push({
      text: '',
      id: ++cpt
    });
  }
});

[alvarezmario]

I have exactly the same issue. I have this code working on 1.3.16 but when I update to 1.4 it stop working. The ng-repeat is not updating the data.

[alvarezmario]

ping @Narretz @petebacondarwin I think this is a bug

[gkalpak]

Wow ! Impressive combination of prerequisites:

1. ngAnimate
2. ngForm and ngRepeat on the same element
3. Inputs with some validation directive

I suspect it has something to do with some class-based animation on the [ng-form] element (e.g. ng-valid/ng-invalid etc) that cancels ngRepeat's structural animation (removal).

FWIW, it broke in v1.4.0-rc.0 (it works OK up to v1.4.0-beta.6).

[alvarezmario]

@gkalpak well, if you think about it, is not that hard to get that combination in practice.
This currently is stopping me from upgrading to Angular 1.4.1, as I have many cases where this combination is applied. @matsko any chance to have this solved ASAP?
Thanks a lot

[jlowcs]

@Nomack84 in the meantime, you could just add another element inside your ng-repeat element:

http://plnkr.co/edit/kXyo7xcwWZVgSYtpslyW

[alvarezmario]

It doesn't work. If you are more than 1 item, it stop working adding items.

2015-06-19 11:50 GMT-05:00 Jerome Louis notifications@github.com:

@Nomack84 https://github.com/nomack84 in the meantime, you could just
add another element inside your ng-repeat element:

http://plnkr.co/edit/kXyo7xcwWZVgSYtpslyW

—
Reply to this email directly or view it on GitHub
#12161 (comment)
.

Ing. Mario A. Alvarez García
Teléfono: +593-998483331

[Narretz]

@Nomack84 This is because @jlowcs example doesn't increment the id when adding new items. It has nothing to do with this specific bug. Moreover, please don't put pressure on the contributors. What's helpful is to try and debug the problem further. Step through the code, and see where it breaks.

[jlowcs]

@Narretz is right. I updated both plunkr.

[startswithaj]

ngAnimate inconjunction with ng-repeat causes a rootScope digest/apply per element animated.

This is the actual angular ng-repeat animation plunkr modified to demostrate the issue. You need to open inspector and view console log. Then type 'j' in the search field

No Animation - 2 digests happen on the rootscope level (for dirty checking)
http://plnkr.co/edit/lf70ifdNEh0wftQCqmEy

Animation class on ng-repeat 8 digests happen - 1 rootscope digest per element animated
http://plnkr.co/edit/l1vXyxqBYVLrOHnBc1vK

This is the easiest way to illustrate it. Is this desired behaviour? If its going to digest shouldnt it just digest the scope its in rather than do an $apply and bubble digests all the way up/down from the rootscope?

[Narretz]

@startswithaj I don't see how this is immediately relevant to the issue at hand. The problem here is that animate does not remove the elements properly.

@matsko Do you think you could take a look at that next week?

[sreeramu]

@matsko this issue is due to first leave animation is called after that remove class is called on same element so when ngAnimate merge the animation option in mergeAnimationOptions it overrides the leave callback so the element remains unremoved, i had already created one PR for this #12271, you can check if this method of fixing is ok or need to fix is other way.

[startswithaj]

@Narretz your totally right, I'm not even sure why i put this comment here. I suspect I was suppose to make this comment on another ticket relating to ng-animate.

[bc-jasond]

thanks for fixing!!!