ng-repeat中的AngularJS / PHP表单:如何获取特定数据

时间:2018-03-12 10:47:17

标签: javascript angularjs forms post angularjs-ng-repeat

我有一个由ng-repeat组成的表单(针对每个需求)。 用户将能够在此ng-repeat中编辑“日期化”或“主题拒绝”,并点击按钮提交“Valider la modification”,仍在此ng-repeat中(以编辑需求中的需求) )。

以下是代码:

<div class="jumbotron" ng-controller="gestDemInstallController">
<h1 class="text-center">{{ soustitre }}</h1>

<p>{{presentation}}</p>


      <!--une ligne pour chaque demande
      utilisation de getDataDemandesInstall.php
      et de getDataDemandesInstallApplis.php
      -->

      <form> 
      {{ reussite }}<!-- indique un msg au clic du gestionnaire -->

      <br><!-- on affiche chaque demande d'installation -->
      <div ng-repeat="dem in demandesInstallations" class="tableau">
          <br>
          <label>ID :</label>
          {{dem.id}}

          <br>
          <label>Ordinateur :</label>
          {{dem.nomPC}}

          <br>
          <label>Date demande :</label>
          {{dem.dateDemande}}

          <br>
          <label>Date réalisation :</label>
          <input ng-model="date_real" type="date" value="{{dem.dateRealisation}}" class="form-control input-normal bouton">
          Date enregistrée: {{dem.dateRealisation}}

          <br><br>
          <label>Motif refus :</label>
          <input ng-model="motif_refus" type="text" value="{{dem.motifRefus}}" class="form-control input-normal bouton">

          <br>
          <label>Unité :</label>
          {{dem.unite}}

          <br>
          <label>Demandeur :</label>
          {{dem.demandeur}}


          <br>
          <!--boucle ng-repeat affichant chaque appli et profil choisi-->
          <div ng-repeat="a in demandesInstallApplis">
            <label><i>Applications demandées</i></label><br>

            <label>Nom application :</label>
            {{a.nom}}

            <br>
            <label>Profil demandé :</label>
            {{}}
          </div><!--fin ligne les applications-->


          <input ng-model="btn{{dem.id}}" ng-click="checkGestDemInstall()" type="button" value="Valider la modification" class="form-control">

      </div><!--fin de la demande, fin du ng-repeat-->

      </form>  

这是Controller(AngularJS)

//----RECUPERATION DES DONNEES : METHODE POST---------//
//----------------------------------------------------//

$scope.checkGestDemInstall = function(){
    //on valide les données entrées
    //on peut ensuite les envoyer au script PHP
    //en utilisant la méthode HTTP Post

    var error=0;

    /*---- Le mot de passe est vérifié --*/

    //si pas d'erreur (ni d'erreur mdp ni d'erreur id/mail)
    if (error === 0) {
        //on lance la méthode POST de la requête HTTP
        var request = $http({
            method: "post",
            url: "/sio2/projets/gedeon_php/pages/postGestDemInstall.php",
            data: {
                //celui qui a été cliqué
                date_real: $scope.date_real,
                motif_refus: $scope.motif_refus
            },
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
        /* Check whether the HTTP Request is Successfull or not. */
        request.success(function (data) {
            $scope.reussite = "Données bien envoyées : "+data +" (information réceptionnée de PHP)";
        });
    }
    else {
        $scope.reussite = "Vous avez mal rempli le formulaire. Erreur de type : " + error;
    }

}; //fin fonction checkGestDemInstall()

正如您在我的控制器中看到的,我想获取我的数据,我的意思是dem.date_real和dem.motif_refus,而我对每个输入都有相同的ng模型...确实我有几个输入(一个是ng-repeat)我真的不知道如何从编辑的“date_real”和编辑的“motif refus”中获取数据。

感谢您的任何建议!

//////////////////// 感谢您的建议,我现在有了这些代码,但仍有一些错误: 错误1: $ parse:syntax

错误2: ngRepeat:dupes

这里面是我的ng-repeat dem in demand:

<label>Date réalisation :</label>
        <input ng-model="dem.dateRealisation" type="text" value="{{dem.dateRealisation}}" class="form-control input-normal bouton">
        Date enregistrée: {{dem.dateRealisation}}

        <br><br>
        <label>Motif refus :</label>
        <input ng-model="dem.motifRefus" type="text" value="{{dem.motifRefus}}" class="form-control input-normal bouton">

在我的控制器中:

data: {
                    //celui qui a été cliqué
                    date_real: $scope.dateRealisation, //= new Date(dateRealisation),//error ngModel:datefmt
                    motif_refus: $scope.motifRefus
                },

然后在这里发布我的数据,我想通过在PHP中回复它来检查,就像我在插入之前一样...

    include('../bdd/conn.php');

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
@$date_real = $request->dateRealisation;
@$motif_refus = $request->motifRefus;


echo 'date real : '. $date_real . ' motif refus : '. $motif_refus; 

我喜欢一切都可以理解,所以我做了一个小方案来解释:

enter image description here

1 个答案:

答案 0 :(得分:0)

如果我理解正确,请将您的ng模型更改为dem.dateRealisationdem.motifRefus,而不是date_realmotif_refus。如果您使用在范围上定义的变量,那么对于您更改日期的每个需求,它将更新这些变量,只为每个变量返回一个值。

如果您希望在Post请求中发送的数据包含每个需求的日期,那么您必须发送不同的对象。您可以发送demandesInstallations,然后更改此数据对象的处理方式