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

jlowcs · 2015-06-18T12:02:10Z

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 · 2015-06-18T17:27:12Z

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 · 2015-06-18T17:30:27Z

ping @Narretz @petebacondarwin I think this is a bug

gkalpak · 2015-06-18T19:19:04Z

Wow ! Impressive combination of prerequisites:

ngAnimate
ngForm and ngRepeat on the same element
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 · 2015-06-19T13:31:55Z

@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 · 2015-06-19T16:47:55Z

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

http://plnkr.co/edit/kXyo7xcwWZVgSYtpslyW

alvarezmario · 2015-06-19T19:19:48Z

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 · 2015-06-19T21:47:16Z

@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 · 2015-06-19T22:11:53Z

@Narretz is right. I updated both plunkr.

startswithaj · 2015-07-07T03:56:59Z

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 · 2015-08-05T14:14:53Z

@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 · 2015-08-05T14:29:47Z

@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 · 2015-08-06T01:34:11Z

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

…ow-up animation Closes angular#12271 Closes angular#12249 Closes angular#12161

bc-jasond · 2015-08-14T20:13:29Z

thanks for fixing!!!

Narretz added component: ngAnimate type: bug severity: regression labels Jun 18, 2015

Narretz added this to the 1.4.2 milestone Jun 18, 2015

Narretz assigned matsko Jun 18, 2015

petebacondarwin modified the milestones: 1.4.2, 1.4.3 Jul 6, 2015

matsko modified the milestones: 1.4.3, 1.4.4 Jul 14, 2015

Narretz mentioned this issue Aug 5, 2015

ng-form cannot show message & remove item from arry #12249

Closed

hparfr mentioned this issue Aug 11, 2015

Leave Animation callback overridden by next animation #12271

Closed

Narretz mentioned this issue Aug 12, 2015

Bug using ngForm and ngRepeat on the same node #12561

Closed

matsko pushed a commit to matsko/angular.js that referenced this issue Aug 12, 2015

fix($animate): leave animation callback should not overridden by foll…

f3fa3e7

…ow-up animation Closes angular#12271 Closes angular#12249 Closes angular#12161

matsko mentioned this issue Aug 12, 2015

PR refactor for #12271 #12567

Closed

matsko closed this as completed in 92e41ac Aug 12, 2015

lee-tunnicliffe pushed a commit to lee-tunnicliffe/angular.js that referenced this issue Aug 13, 2015

fix($animate): leave animation callback should not overridden by foll…

887948a

…ow-up animation Closes angular#12271 Closes angular#12249 Closes angular#12161

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jlowcs commented Jun 18, 2015

alvarezmario commented Jun 18, 2015

alvarezmario commented Jun 18, 2015

gkalpak commented Jun 18, 2015

alvarezmario commented Jun 19, 2015

jlowcs commented Jun 19, 2015

alvarezmario commented Jun 19, 2015

Narretz commented Jun 19, 2015

jlowcs commented Jun 19, 2015

startswithaj commented Jul 7, 2015

Narretz commented Aug 5, 2015

sreeramu commented Aug 5, 2015

startswithaj commented Aug 6, 2015

bc-jasond commented Aug 14, 2015

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

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

Comments

jlowcs commented Jun 18, 2015

alvarezmario commented Jun 18, 2015

alvarezmario commented Jun 18, 2015

gkalpak commented Jun 18, 2015

alvarezmario commented Jun 19, 2015

jlowcs commented Jun 19, 2015

alvarezmario commented Jun 19, 2015

Narretz commented Jun 19, 2015

jlowcs commented Jun 19, 2015

startswithaj commented Jul 7, 2015

Narretz commented Aug 5, 2015

sreeramu commented Aug 5, 2015

startswithaj commented Aug 6, 2015

bc-jasond commented Aug 14, 2015