Post-données de formulaire créé par ng-repeat

J'ai un champ de saisie =, une case à cocher et une option de téléchargement de fichier par ligne de table et les lignes sont créées par ng-repeat.Post-données de formulaire créé par ng-repeat

<tr data-ng-repeat="choice in choices track by $index"> 
<td><input type="textbox" size="50" class="des-textinput" required></td> 
<td><input type="checkbox" required></td> 
<td><input type="file" class="photo-upload" ></td> 
</tr>

Ma question est de savoir comment afficher les données à backend via un bouton d'envoi comme il est créé par ng-repeat et il sera multiple.

Source

2017-10-11 Samim

Pour les débutants, liez vos entrées au modèle en utilisant ng-model. Créez ensuite une directive qui liera l'entrée de fichier au modèle. Enfin, appelez une fonction de votre bouton de soumission qui va parcourir le modèle et appeler un service de téléchargement pour chaque fichier.

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.choices = [{ 
 
    desc: 'file 1', 
 
    include: false, 
 
    file: null 
 
    }, { 
 
    desc: 'file 2', 
 
    include: false, 
 
    file: null 
 
    }, { 
 
    desc: 'file 3', 
 
    include: false, 
 
    file: null 
 
    }]; 
 

 
    $scope.uploadFiles = function() { 
 
    $scope.choices.forEach(f => { 
 
     const file = f.file; 
 
     if (file) { 
 
     // call upload function from here 
 
     console.log('Upload: ', file); 
 
     } 
 
    }); 
 
    }; 
 
}); 
 

 
app.directive("fileInput", function() { 
 
    return { 
 
    require: "ngModel", 
 
    restrict: 'A', 
 
    link: function postLink(scope, element, attrs, ngModel) { 
 
     element.on("change", function(e) { 
 
     var file = element[0].files[0]; 
 
     ngModel.$setViewValue(file); 
 
     }); 
 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="uploadApp"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <table> 
 
    <tr data-ng-repeat="choice in choices track by $index"> 
 
     <td> 
 
     <input type="textbox" size="50" class="des-textinput" ng-model="choice.desc" required /> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" required ng-model="choice.include" /> 
 
     </td> 
 
     <td> 
 
     <input type="file" class="photo-upload" ng-model="choice.file" file-input/> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <button ng-click="uploadFiles()">Submit</button> 
 
</body> 
 

 
</html>

Source

2017-10-11 13:27:08 jbrown

Post-données de formulaire créé par ng-repeat

Répondre

Questions connexes