首页 > Web开发 > 详细

angularJs 多文件动态上传(删除其中一个文件的时候,要么file没被删除,要么删除了之后,点击事件失效)

时间:2018-05-15 20:23:24      阅读:227      评论:0      收藏:0      [点我收藏+]
<div
cacModule.controller(‘CacScriptEditCtrl‘, CacScriptEditCtrl);
    CacScriptEditCtrl.$inject = [‘$uibModalInstance‘, ‘$scope‘, ‘$compile‘, ‘$scope‘, ‘cacScriptService‘, ‘messageService‘, ‘entity‘];

    function CacScriptEditCtrl($uibModalInstance, $scope, $compile, $scope, cacScriptService, messageService, entity) {

        var vm = this;
        vm.views = {
            script: entity.script,
            scriptList: [],
            cancel: cancel,
            //save: save,
            reduceScript: reduceScript,
            addScript: addScript,
            uploadAttach: uploadAttach,
            files: []
        };
function cancel() {
            $uibModalInstance.close({action: "cancel"});
        }
        function uploadAttach($file) {

            vm.views.files = $file;
            if($file.length>1){
                for(var i=0;i<$file.length;i++){
                    console.log($file[i]);
                }
            }
        }

        function reduceScript($index) {

       /**这里虽然吧type=file(选了文件之后)置为了null,但是执行完vm.views.scriptList.splice($index,1);之后只要是class="file{{$index}}"(之前移除掉的那个$index)的file都会为空
       *主要原因就使我在ng-repeate那里使用了track by $index,自行百度track by $index
       *如果我不用angular.element(".file"+$index).val(null);这句去置空,而是使用remove直接移除dom(angula.element(".fileDiv"+$index).remove;)
       *会导致angular.element(".fileDiv"+$index)元素的点击事件失效(之前移除掉的那个$index),因为用了remove,它已经脱离这个页面了(这里理解有点难),其原因也是因为用了track by $index;
       *如果不用track by $index的话,直接使用vm.views.sriptList.splice($index,1);就能直接移除
       */
angular.element(
".file" + $index).val(null); //angular.element(".fileDiv"+$index).remove(); vm.views.scriptList.splice($index, 1); } function addScript() { initFileInput(); } var temp = 0; function initFileInput() { temp++; var scriptObj = { scriptParams: temp }; vm.views.scriptList.push(scriptObj); } function init() { //新增 if (vm.views.script == null) { initFileInput(); } else { //编辑 } } init(); }

 

class="form-group fileDiv{{$index}}" ng-repeat="item in cacScriptEditVm.views.scriptList track by $index">
             <div class="col-sm-4">
                 <input type="file" id="file{{$index}}" class="file{{$index}}" ngf-select ngf-change="cacScriptEditVm.views.uploadAttach($files)"/>
             </div>
             <div class="col-sm-8">
                 <input type="text" name="file" ng-model="item.scriptParams"/>
                 <a class="btn btn-info" ng-click="cacScriptEditVm.views.addScript()"><i class="fa fa-plus"></i> </a>
                 <a class="btn btn-info" ng-click="cacScriptEditVm.views.reduceScript($index)"><i class="fa fa-minus"></i> </a>
             </div>
         </div>

 总结

track by是angular1.2后新加入的。ng-repeat会为每一次元素加上一个hashkey $$hashKey来识别每一个元素,当我们从后端重新获取数据时,即使数据完全一样,但是由于hashKey不一样,angular会删除之前的所有dom,重新生成新的dom。这样效率就会大大降低。可以理解为ng-repeat默认是 track by $$hashKey的。所以,我们应该使用一些不会变的东西来作为标识,比如后端数据的id.

这样当重新获取数据时,由于id没有变,angular就不会去删除原来的dom,只会更新其中的内容,不同的id再添加新的dom。效率就能提升了。这相当于react中data-reactid的功能,这样angular并不比react慢。

 

特别说明:

1.track by 一定要放在orderBy之后,否则会影响orderBy的效果;

2.当单一数组如["a","a"]有重复元素时,需要使用track by $index来保证两个元素都会渲染,否则只会渲染一个

angularJs 多文件动态上传(删除其中一个文件的时候,要么file没被删除,要么删除了之后,点击事件失效)

原文:https://www.cnblogs.com/zml-java/p/9042755.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!