<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