IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

Passer un paramètre d'une ligne d'un tableau sélectionnée avec une checkbox dans un form


Sujet :

AngularJS

  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2008
    Messages
    757
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2008
    Messages : 757
    Points : 572
    Points
    572
    Par défaut Passer un paramètre d'une ligne d'un tableau sélectionnée avec une checkbox dans un form
    Bonjour, le titre n'est pas très clair ... je le reconnais ! passons aux explications :

    Nous sommes dans un form à l'intérieur duquel nous avons un tableau créé avec des ng-repeat, et un bouton 'submit' de validation du formulaire.
    Dans ce form, il y a aussi d'autres champs textes, dates ... etc mais cela n'impacte pas le problème que j'ai.

    Dans le tableau (qui se trouve dans le form), chacune des lignes contient une case avec une checkbox qui doit me permettre de sélectionner la ligne du tableau et un attribut sera passé par le boutton 'submit'

    Pour passer mes champs, je n'ai aucun problème car le ng-model me permet de passer un paramètres dans la méthode de validation du bouton 'submit'.

    Mais pour passer un attribut de la ligne du tableau dans laquelle la checkbox a été checkée ... là je planche.

    J'utilise des checklist-model mais sans succès.

    Voici la table dans laquelle se trouvent les checkbox :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <form class="css-form">
    <table class="table table-stripped">
    	<thead style="background-color: #CFCFCF">
    		<tr>
    			<td><B></B></td>
    			<td><B>Audience</B></td>
    			<td><B>Size</B></td>
    			<td><B>Created</B></td>
    		</tr>
    	</thead>
    	<tbody>
    		<tr ng-repeat="audience in audiencesList">
    			<td><input checklist-model="audience.audience_id" type="checkbox"/></td>
    			<td>{{audience.audience_name}}</td>
    			<td>{{audience.audience_reg_ids.length}}</td>
    			<td>{{audience.audience_date}}</td>
    		</tr>
    	</tbody>
    </table>
     
    ........
     
    <input type="submit" ng-click="sendPush(pushMessage, pushTime, pushAudience)" value="Send push" />
     
    </form>

    Merci pour votre aide !
    OS : LinuxMint 20

  2. #2
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2008
    Messages
    757
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2008
    Messages : 757
    Points : 572
    Points
    572
    Par défaut
    Voici la solution que j'ai trouvée :
    Dans la tr de la table, je met le ng-click, et avant la table j'insère un input hidden comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <input type="hidden" ng-model="ident">
    <table class="table table-striped table-hover table-responsive">
        <thead>
          <tr>
            <td style="color:#5F5F5F;"><B>Language</B></td>
            <td style="color:#5F5F5F;"><B>Audience</B></td>
            <td style="color:#5F5F5F;"><B>Size</B></td>
            <td style="color:#5F5F5F;"><B>Created</B></td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="audience in audiencesList" ng-click="cbClicked(audience.audience_id)">
            <td>{{audience.audience_language}}</td>
            <td>{{audience.audience_name}}</td>
            <td>{{audience.audience_reg_ids}}</td>
            <td>{{audience.audience_date}}</td>
          </tr>
        </tbody>
      </table>
    Dans le javascript, je renvoie la veleur sur un input hidden comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $scope.cbClicked = function(ident) {
    	$scope.ident = ident;
    };

    Du coup, lorsque je clique, j'envoie au javascript l'identifiant de la ligne sur laquelle j'ai cliqué, la fonction du javascript va mettre à jour mon input hidden grâce à ng-model, et lorsque je valide le formulaire, je n'ai plus qu'à insérer le ng-model du input hidden .....

    Du bricolage ....

    OS : LinuxMint 20

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2010] Lier un email (ou pièce jointe) avec une ligne d'un tableau
    Par mikeactuaire dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 17/08/2011, 16h57
  2. Suppression d'une ligne d'un tableau à partir d'une valeur de cellule
    Par jerem1 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 17/12/2010, 15h15
  3. Réponses: 31
    Dernier message: 27/11/2010, 20h14
  4. [MySQL] recuperer une ligne d'un tableau en selectionant un checkbox
    Par ala1986 dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 25/03/2010, 13h28
  5. [Conception] Supprimer une ligne d'un tableau à partir d'un CHECKBOX
    Par snakejl dans le forum PHP & Base de données
    Réponses: 71
    Dernier message: 30/05/2006, 09h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo