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:
in plunkr,
dataurlnot displayed until afteradd imageclicked. may plunkr issue since image displayed nicely in site. --solvedif upload image onto first form, click
add image, , click first tab, delete first tab, data deleted in$scope.imagesdom not updated. adding$scope.$apply()results in digest in progress error.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
Post a Comment