javascript - How to get AngularJS to update the DOM on ng-repeat array splice? $scope.$apply() returns an error -


solved - have plunkr demonstrates issues facing. simple image uploader uses filereader display image (thanks angular-file-uploads). have placed in dynamic form can added , removed.

issues:

  1. in plunkr, dataurl not displayed until after add image clicked. may plunkr issue since image displayed nicely in site. --solved

  2. if upload image onto first form, click add image, , click first tab, delete first tab, data deleted in $scope.images dom not updated. adding $scope.$apply() results in digest in progress error.

  3. the old file name displayed in upload input input empty.

my question is: how can dom updated when image removed?

update: issue #1 solved, issues #2 , #3 remain.

update2: i've tried attaching $scope.$apply <input type="file" onchange="..." removing image splice() not fire onchange event.

update3: i've added simple text input ng-model="image.caption" see if the dom update appropiately. does. dom updates if images[0] deleted images[1] has image.

update4: grundy has identified problem: track $index. removing makes work expected. not sure why though.

you problem track by expression in ngrepeat
says in doc ngrepeat

ngrepeat makes corresponding changes dom:

  • when item added, new instance of template added dom.
  • when item removed, template instance removed dom.
  • when items reordered, respective templates reordered in dom.

so, in case when splice first element, index last element change first , angular think need remove last element dom, , not need change first.

also, $index, $last , etc special properties in ngrepeat scope, avalilable , not depend on track by expresion


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -