角度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

あなたは、複数の行、私が使用することはできません

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-repeatを使用することができますここで繰り返す。それは報告しません。それはグリッドのようなものです、ユーザーは行を追加し、学生の詳細を追加します.. ng-repear – srinivasan

角度jsの各行テーブルにアップロードファイル

答えて

関連する問題