在角度js的每一行表中上傳文件

我有一個表，並且用戶將在表格行中輸入詳細信息並在每行中瀏覽相應的圖像。我在使用角度js時做了這些。在掙扎之後很多，我做了第一行。現在我不知道如何使用相同的概念爲每一行重複此操作。請幫忙。提前致謝。下面是我的代碼..在角度js的每一行表中上傳文件

<body ng-app = "myApp"> 

    <table class="table"> 
     <thead> <th>Stu Name</th> <th>Photo</th> </thead> 

     <tr> 
      <td> </td> 
      <td> 
       <input data-my-Directive type="file" name="file" id="fileUpload" style="display: none;"> 
       <img id="imgUpload" width="140px" height="150px" style="border-style: dashed; border-color: grey;"> 
      </td> 
     </tr> 

    </table> 

    <script type="text/javascript"> 
     $("#imgUpload").click(function(){   
      $("#fileUpload").click(); 
     }) 
    </script> 
    </body>

js代碼

var app = angular.module('myApp', []); 

app.directive('myDirective', function (httpPostFactory) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function (scope, element, attr) { 

      element.bind('change', function() 
      { 
       var formData = new FormData(); 
       formData.append('file', element[0].files[0]); 
       httpPostFactory('upload_image.php', formData, function (callback) { 
        // recieve image name to use in a ng-src 
        console.log(callback);      
        $('#imgUpload').attr("src",'images/' + callback); 
       }); 
      }); 

     } 
    }; 
}); 

app.factory('httpPostFactory', function ($http) { 
    return function (file, data, callback) { 
     $http({ 
      url: file, 
      method: "POST", 
      data: data, 
      headers: {'Content-Type': undefined} 
     }).success(function (response) { 
      callback(response); 
     }); 
    }; 
});

來源

2017-06-15 srinivasan

可以使用ng-repeat遍歷DOM來添加多行

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
$scope.tableArr = ['one','two'] 
 

 
}) 
 
.directive('myDirective', function (httpPostFactory) { 
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
      myDirective : '=myDirective' 
 
     }, 
 
     link: function (scope, element, attr) { 
 

 
      element.bind('change', function() 
 
      { 
 
       var formData = new FormData(); 
 
       formData.append('file', element[0].files[0]); 
 
       httpPostFactory('upload_image.php', formData) 
 
       .then(function(response){ 
 
         $('#imgUpload'+scope.myDirective).attr("src",'images/' + response.data); 
 
       }) 
 
      }); 
 

 
     } 
 
    }; 
 
}) .factory('httpPostFactory', function ($http) { 
 
    return function (file, data) { 
 
     $http({ 
 
      url: file, 
 
      method: "POST", 
 
      data: data, 
 
      headers: {'Content-Type': undefined} 
 
     }) 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<table class="table"> 
 
     <thead> <th>Stu Name</th> <th>Photo</th> </thead> 
 
     <tr ng-repeat="item in tableArr"> 
 
      <td> </td> 
 
      <td> 
 
       <input data-my-Directive="$index" type="file" name="file" id="fileUpload" style="display: none;"> 
 
       <img id="imgUpload{{$index}}" width="140px" height="150px" style="border-style: dashed; border-color: grey;"> 
 
      </td> 
 
     </tr> 
 

 
    </table> 
 
</div>

來源

2017-06-15 19:07:10

我不能使用在這裏重複。因爲它沒有報告。它就像網格一樣，用戶將添加行並添加學生的詳細信息..有沒有什麼方法可以不使用ng-repear – srinivasan

在角度js的每一行表中上傳文件

回答

相關問題