web-dev-qa-db-fra.com

si déclaration en ng-clic

Y at-il un moyen de mettre une condition dans un ng-click? Ici, je veux que le formulaire ne soit pas soumis s'il y a des erreurs de formulaire, mais j'ai une exception d'analyse.

 <input  ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">

J'ai essayé d'utiliser ng-disabled mais mon plugin de validation ne fonctionne pas car le formulaire n'est jamais soumis, il n'est donc pas déclenché.

javascriptangularjs
64
Spring

Ne mettez aucune expression de condition dans le modèle.

Faites-le au contrôleur.

Modèle:

<input ng-click="check(profileForm.$valid)" name="submit" 
       id="submit" value="Save" class="submit" type="submit">

Manette:

$scope.check = function(value) {
    if (value) {
       updateMyProfile();
    }
}
134
Chen-Tsu Lin

Ceci est peut-être inutile et inutile, mais comme il s'agit de javascript, vous n'avez pas à utiliser le ternaire comme suggéré ci-dessus dans l'instruction ng-click. Vous devriez également pouvoir utiliser la syntaxe paresseuse d'évaluation ("ou die"). Donc, pour votre exemple ci-dessus:

<input  ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">

deviendrait:

<input  ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit">

Dans ce cas, si le profil n'est pas valide, rien ne se passe, sinon updateMyProfile () est appelé. Comme dans le lien fourni par @falinsky ci-dessus. 

55
Rob Wilson

Voici un hack que j'ai découvert qui pourrait fonctionner pour vous, même si ce n'est pas joli et personnellement, je serais gêné d'utiliser une telle ligne de code:

ng-click="profileForm.$valid ? updateMyProfile() : alert('failed')"

Maintenant, vous devez penser 'mais je ne veux pas que cela alerte ("échec") si ma profileForm n'est pas valide. Eh bien c'est la partie laide. Pour moi, peu importe ce que je mets dans la clause else de cette déclaration ternaire, elle n'est jamais exécutée.

Pourtant, si elle est supprimée, une erreur est générée. Donc, vous pouvez simplement le farcir avec une alerte inutile.
Je t'ai dit que c'était moche ... mais je ne reçois même pas d'erreurs quand je fais quelque chose comme ça.
La manière appropriée de faire ceci est comme l'a mentionné Chen-Tsu, mais à chacun leur propre.

30
stackPusher

Si vous devez le faire de cette façon, voici quelques façons de le faire:

Désactiver le bouton avec ng-disabled

De loin la solution la plus simple.

<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >

Cacher le bouton (et montrer autre chose) avec ng-if

Peut-être que si vous affichez/cachez un balisage complexe.

<div ng-if="profileForm.$valid">
    <input ng-click="updateMyProfile()" ... >
</div>
<div ng-if="!profileForm.$valid">
    Sorry! We need all form fields properly filled out to continue.
</div>

(rappelez-vous, il n'y a pas de ng-else ...)

Un mélange des deux

Communiquer à l'utilisateur où se trouve le bouton (il ne le cherchera plus), mais expliquez pourquoi il est impossible de cliquer dessus.

<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >
<div ng-if="!profileForm.$valid">
    Sorry! We need all form fields properly filled out to continue.
</div>
11
user3638471

Nous pouvons ajouter un événement ng-click de manière conditionnelle sans utiliser de classe désactivée.

HTML: 

  <input ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit">
5
Rubi saini

De http://php.quicoto.com/inline-ifelse-statement-ngclick-angularjs/ , voici comment vous le faites, si vous devez réellement:

ng-click="variable = (condition=='X' ? 'Y' : 'X')"
4
kpoz

Ecrire comme 

<input type="submit" ng-click="profileForm.$valid==true?updateMyProfile():''" name="submit" value="Save" class="submit" id="submit">
0
Pawan Kr

Vous pouvez mettre des conditions à l'intérieur des balises. Essayer:

ng-class="{true:'active',false:'disable'}[list_status=='show']"
0
Sevenearths