Javascript Girl
  1. Javascript Girl
  3. Mode angulaire de: afficher ou masquer l'élément après le clic du bouton
Intereting Posts
Convertir le cadre parent-enfant en arbre La dépendance de données Flux / Alt, comment gérer élégamment et idiomaticement FullCalendar: quel niveau de performance des rendements d'événements devrais-je attendre? La méthode Date.getMonth () a un bug? Date minimum et maximum Jquery Ajax Appel à l'API WEB Comment utiliser Assetic pour les besoins Pourquoi mon code renvoie l'erreur «manquant: après identification de la propriété» en JavaScript? Javascript var a = function b () {} Quel est le but d'un paramètre nommé "indéfini" dans une fonction JavaScript? Comment étirer des images sans antialiasing Récupérer le rapport d'aspect d'un svg <image> "Undefined" est retourné lors de l'accès à certaines propriétés listées de l'objet Fichier Injecter dans la page d'erreur de navigation obtient: Erreur: Aucune fenêtre correspondant {"matchesHost": } L'extension Chrome pour rediriger l'onglet vers ma page

Mode angulaire de: afficher ou masquer l'élément après le clic du bouton

Je suis assez nouveau pour être angulaire et je ne peux pas le faire correctement.

Dans l'exemple suivant, j'essaie de montrer la réponse à une question après que l'utilisateur clique sur le bouton correspondant. Avant que la réponse ne s'affiche, je veux exécuter une fonction qui vérifie si l'utilisateur a le privilège de révéler la réponse. Dans l'exemple, je suppose qu'il a les droits.

Ce que je dois faire pour supprimer la classe "ng-hide" dans la ligne où le bouton a été cliqué.

J'apprécie tout type d'aide. Merci d'avance 

var myApp = angular.module('myApp', []); myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) { $scope.questions = [ ["what is 1+1?"], ["what color of the sky"], ["what is the answer to the universe"] ]; $scope.answers = [ 2, ["blue, black or orange"], 40 ]; $scope.hideme = function(i) { $log.log("element " + i + " was cicked"); //this will be detemined within a fct, so lets asume the has the according rights var userPrivilege = true; if (userPrivilege) { //HOW TO: show the answer with the index i } } }]); 
 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <!-- angular --> <script src="https://code.angularjs.org/1.4.0/angular.min.js"></script> <script src="app.js"></script> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body ng-controller=QuestionCtlr> <table class="table table-hover"> <thead> <tr> <th>Question</th> <th>Answer</th> </tr> </thead> <tbody> <tr ng-repeat="q in questions track by $index"> <td>{{q[0]}}</td> <td class = "ng-hide">{{q[0]}}</td> <td> <button type="button" ng-click="hideme($index)" class="btn btn-default">show me</button> </td> </tr> </tbody> </table> </body> </html>

Voici un exemple de travail complet.

Les choses que j'ai changé:

  • Les réponses sont maintenant stockées en tant que propriété de chaque question. Cela rend le code plus propre (pas besoin de track by $index ).
  • La directive ng-show est utilisée comme un attribut au lieu d'une classe et est liée à une propriété showAnswers de la question.
  • La fonction showme définit la propriété showAnswers sur true lorsque vous cliquez sur le bouton. 
 var myApp = angular.module('myApp', []); myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) { $scope.questions = [ {question: "what is 1+1?", answers: [2]}, {question: "what color of the sky", answers: ["blue", "black", "orange"]}, {question: "what is the answer to the universe", answers: [42]} ]; $scope.showme = function(q) { $log.log("question " + q.question + " was cicked"); var userPrivilege = true; if (userPrivilege) { q.showAnswers = true; } } }]); 
 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <!-- angular --> <script src="https://code.angularjs.org/1.4.0/angular.min.js"></script> <script src="app.js"></script> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body ng-controller=QuestionCtlr> <table class="table table-hover"> <thead> <tr> <th>Question</th> <th colspan="2">Answer</th> </tr> </thead> <tbody> <tr ng-repeat="q in questions"> <td >{{q.question}}</td> <td ng-show="q.showAnswers"> <div ng-repeat="a in q.answers">{{a}}</div> </td> <td> <button type="button" ng-click="showme(q)" class="btn btn-default">show me</button> </td> </tr> </tbody> </table> </body> </html>

Essayez en html 

 <table class="table table-hover"> <thead> <tr> <th>Question</th> <th>Answer</th> </tr> </thead> <tbody> <tr ng-repeat="q in questions"> <td>{{q[0]}}</td> <td ng-class="{hide : active != $index}">{{answers[$index]}}</td> <td> <button type="button" ng-click="hideme($index)" class="btn btn-default">show me</button> </td> </tr> </tbody> </table>

angulaire 

 var myApp = angular.module('myApp', []); myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) { $scope.questions = [ ["what is 1+1?"], ["what color of the sky"], ["what is the answer to the universe"] ]; $scope.answers = [ 2, ["blue, black or orange"], 40 ]; $scope.active = null; $scope.hideme = function(i) { $scope.active = i; } }]);

Violon

Prenant votre demande de «privilège» en considération, je pense que vous voudrez créer une condition. Au lieu d'ajouter la classe ng-hide, utilisez ng-hide, ng-show ou ng, si tel est le cas: 

 <td ng-show="hasPrivilege && show[$index]"> <!--or ng-hide or ng-if-->

Et votre bouton: 

 <button type="button" ng-click="hideme($index)">

Cela montrera le td si les deux déclarations sont vraies. Si l'une ou l'autre est fausse, elle ne montrera pas l'élément.

Puis dans votre contrôleur: 

 $scope.hideme = function(index) { $scope.hasPrivilege = getPrivilege(); $scope.show[index] = true; }

La fonction getPrivilege() doit retourner true ou false en fonction de l'opportunité de l'utilisateur.

D'abord, vous pouvez utiliser 

 ng-if="condition" //gets only rendered if condition is true ng-show="condition" //shows when condition is true ng-hide="condition" //hides when condition is true

Donc, sur votre bouton 

 ng-click="showAnswer()"

Dans votre contrôleur 

 $scope.displayAnswer = false; $scope.showAnswer = function(){ if(hasRights == true){ $scope.displayAnswer = true //this is used for the hide and show } }

Dans votre html 3 moyens possibles 

 <span ng-if="displayAnswer == true">This is the answer!!!</span> <span ng-show="displayAnswer == true">This is the answer!!!</span> <span ng-hide="displayAnswer == false">This is the answer!!!</span> <button ng-click="showAnswer()">This is the answer!!!</span>

2ème solution avec bascule

Si vous souhaitez masquer la réponse à nouveau sur le même bouton. Ceci affiche et masque le bouton en fonction de son affichage ou de son cache actuel 

 $scope.toggleAnswer = function(displayAnswer){ if(hasRights == true && $scope.displayAnswer == false){ $scope.displayAnswer = true //this is used for the hide and show }else if($scope.displayAnswer == true){ $scope.displayAnswer = false; } }

2ème Html 

 <span ng-if="displayAnswer == true">This is the answer!!!</span> <button ng-click="toggleAnswer(displayAnswer)">This is the answer!!!</span>

Dans ton cas 

 <button ng-click="toggleAnswer($index)">Hide / Show</button>

Et dans votre contrôleur 

  $scope.answers = [{A: 2, show: false},{A: 'blue', show: false}] $scope.toggleAnswer = function(index){ if(hasRights == true){ $scope.answers[index].show = true //this is used for the hide and show } }

En HTML 

 <span ng-if="item.show == true">The Answer !!</span> //the item is coming from item in Answers from the ng-repeat