Angular Way Of: Show Or Hide Element After Button Click

February 03, 2024 Post a Comment

I am pretty new to angular and i cant get it right. inside the following example i am trying to show the answer to a question after the user clicks on the corresponding button. bef

Solution 1:

Here's a complete working example.

Things I changed:

The answers are now stored as a property of each question. This makes the code neater (no need to track by $index).
The ng-show directive is used as an attribute instead of a class, and is bound to a showAnswers property of the question.
The showme function sets the showAnswers property to true when you click the button.

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><htmllang="en"ng-app="myApp"><head><metacharset="UTF-8"><!-- angular --><scriptsrc="https://code.angularjs.org/1.4.0/angular.min.js"></script><scriptsrc="app.js"></script><!-- jquery --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><!-- bootstrap --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><bodyng-controller=QuestionCtlr><tableclass="table table-hover"><thead><tr><th>Question</th><thcolspan="2">Answer</th></tr></thead><tbody><trng-repeat="q in questions"><td >{{q.question}}</td><tdng-show="q.showAnswers"><divng-repeat="a in q.answers">{{a}}</div></td><td><buttontype="button"ng-click="showme(q)"class="btn btn-default">show me</button></td></tr></tbody></table></body></html>

Solution 2:

Try in html

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

angular

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; 
    }
}]);

Fiddle

Solution 3:

Taking your 'privilege' request in consideration, I think you will want to create a condition. Instead of adding the class ng-hide, use ng-hide, ng-show or ng-if like this:

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

and your button:

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

This will show the td if both statements are true. If one or both of them are false, it won't show the element.

then in your controller:

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

the getPrivilege() function should return true or false based on whether the user has the privilege.

Solution 4:

Okay first of all you can use

Baca Juga

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

So on your button

ng-click="showAnswer()"

In your Controller

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

In your html 3 possible ways

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

2nd Solution with toggle

if you want to hide the Answer again on the same button This shows and hides the button depending if its currently shown or hidden

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

2nd Html

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

In your case

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

And In your Controller

$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
   }
}

in HTML

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

javascript spravka

Angular Way Of: Show Or Hide Element After Button Click

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Angular Way Of: Show Or Hide Element After Button Click"