angularjs 操作二維陣列 加 file檔案繫結

java_陳序猿發表於2017-06-14

二維陣列遍歷 

獲取兩個index 其中 獲取父域裡的index 的方法為: {{$parent.index}}  獲取當前index 的方法為:  {{$index}}

注意: 不要用 ng-if 會出現 兩個index 重置成值相同  可以用 ng-show

其中二位陣列需要用到 file 就需要通過一下程式碼 進行值的繫結

<div ng-show="$index==0">
<button type="button" ng-click="addFile($parent.$index,$index)" class="btn btn-primary" >增加行</button>
</div>
<div ng-show="$index>0">
<button type="button" ng-click="deFile($parent.$index,$index)" class="btn btn-primary" >刪除行</button>
</div>

  $scope.files=[
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
                [{"fileTitle": "", "fileNum": "", "fileReply": "", "fileTime": "","file":""}],
            ]


操作二維陣列 :

  $scope.deFile = function (index1,index2) {
            $scope.indexNumByFile= $scope.indexNumByFile-1;
            $scope.files[index1].splice(index2,1);
        };
        $scope.addFile = function (index1,index2) {
            $scope.indexNumByFile= $scope.indexNumByFile+1;
            $scope.files[index1].push({});
        };

或者 根據 item 判斷 index 值  因為如果用了過濾器 傳入的index 不是實際index值

items.splice(items.indexOf(item),1);

angular 繫結 input 的file檔案:

<div class="form-group">
<input type="file" id="file_{{$index}}" name="file_{{$parent.$index}}" ng-model="fileOneOne.file" class="form-control" onchange="angular.element(this).scope().fileNameChanged(this)">
</div>

$scope.fileNameChanged = function (el) {
var filexx = el.files[0];
var index=el.id.replace('file_','');
var parentIndex=el.name.replace('file_','');
$scope.files[parentIndex][index].file=filexx;
};

相關文章