AngularJs Multi-file dynamic upload (delete one of the files, either file is not deleted, or deleted, click event invalidation)

< Div

Cacmodule.controller (' Cacscripteditctrl ', Cacscripteditctrl); Cacscripteditctrl. $inject= [' $uibModalInstance ', ' $scope ', ' $compile ', ' $scope ', ' cacscriptservice ', ' messageservice ', ' entity ']; functionCacscripteditctrl ($uibModalInstance, $scope, $compile, $scope, Cacscriptservice, Messageservice, entity) {varVM = This; Vm.views={script:entity.script, scriptlist: [], Cancel:cancel,//save:save, Reducescript:reducescript, Addscript:addscript, Uploadattach:uploadattach, fi Les: []};functionCancel () {$uibModalInstance. Close ({action:"Cancel"}); }        functionUploadattach ($file) {vm.views.files=$file; if($file. length>1){                 for(vari=0;i< $file. length;i++) {Console.log ($file [i]); }            }        }        functionReducescript ($index) {

/** here, though. type=file (after file selection) is set to NULL, but executes Vm.views.scriptList.splice ($index, 1), followed by class= "file{{$index}} The file of the $index (the one previously removed) will be empty.
* The main reason is that I used track by $index in Ng-repeate, Baidu track by $index
* If I don't use Angular.element (". File" + $index). val (null), this sentence goes to empty, but instead uses remove to remove the DOM (Angula.element (". Filediv" + $index) directly. remove;)
* Causes the Click event of the Angular.element (". Filediv" + $index) element to expire (the one that was previously removed), because with remove, it's already out of the page (it's a bit difficult to understand here) because of the track by $index;
* Use Vm.views.sriptList.splice directly ($index, 1) If you do not need track by $index;
*/
            angular.element ( ". File" + $index). val (null); //angular.element (". Filediv" + $index). Remove ();Vm.views.scriptList.splice ($index, 1); }        functionAddscript () {initfileinput (); }        vartemp = 0; functioninitfileinput () {temp++; varScriptobj ={scriptparams:temp};        Vm.views.scriptList.push (Scriptobj); }        functioninit () {//New            if(Vm.views.script = =NULL) {initfileinput (); } Else {                //Edit}} init (); }

class= "Form-group filediv{{$index}}"ng-repeat= "item in cacScriptEditVm.views.scriptList track by $index">             <Divclass= "Col-sm-4">                 <inputtype= "File"ID= "file{{$index}}"class= "file{{$index}}"Ngf-select Ngf-change= "CacScriptEditVm.views.uploadAttach ($files)"/>             </Div>             <Divclass= "Col-sm-8">                 <inputtype= "text"name= "File"Ng-model= "Item.scriptparams"/>                 <aclass= "Btn btn-info"Ng-click= "CacScriptEditVm.views.addScript ()"><Iclass= "fa fa-plus"></I> </a>                 <aclass= "Btn btn-info"Ng-click= "CacScriptEditVm.views.reduceScript ($index)"><Iclass= "fa Fa-minus"></I> </a>             </Div>         </Div>

Summarize

Track by is a new addition to angular1.2. Ng-repeat will add a HashKey $ $hashKey for each element to identify each element, and when we retrieve the data from the backend, even if the data is exactly the same, but because HashKey is different, angular will delete all the previous DOM, Regenerate the new DOM. So the efficiency will be greatly reduced. It can be understood that the Ng-repeat default is track by $ $hashKey. So, we should use something that doesn't change as a sign, like the ID of the backend data.

So when the data is retrieved, because the ID is not changed, angular will not delete the original DOM, only update the contents of the content, the different IDs and add new DOM. Efficiency can be improved. This is equivalent to the Data-reactid function in react, so angular is no slower than react.

Special Note:

1.track by must be placed after the order, otherwise it will affect the effect of the following order;

2. When a single array, such as ["a", "a"] has a repeating element, you need to use the track by $index to ensure that two elements will be rendered, otherwise it will only render a

AngularJs Multi-file dynamic upload (delete one of the files, either file has not been deleted, or deleted, click event invalidation)