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,
dataurl
not displayed until afteradd image
clicked. 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.images
dom 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