CODEWITHSUNDEEP
javascriptangularjs
esafwan
esafwan

Reputation: 18009

How do you show/hide an element on a click event from js code?

I used to use Jquery extensively. Now that I stumbled upon Angularjs, I am trying understand how it works and I have been really excited about the AutoMagic way it works. For example, am able to do the below process of hiding and showing few blocks just by using ng-click, ng-hide & ng-show. 

<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
    <input type="text" name="user" ng-model="name">
    <button type="submit"  id="submit" ng-click="showConfirm = ! showConfirm">Submit</button>
</form>

<div class="col-md-12 confirmation" ng-show="showConfirm">
        <h2 >Thanks alot for your feedback.</h1>
</div>

But, I am still wondering how can I do the same from code, say from a controller. In Jquery one way to do would be like:

$( "#submit" ).click(function() {
   $(".confirmation").show();
   $("#signup-form").hide(); 
});

And maybe if I want to validate the form I can use .preventDefault(); in Jquery and do something. How does all this work in AngularJs?

Upvotes: 0

Views: 64

Answers (1)

Blazemonger
Blazemonger

Reputation: 92893

Just change the model value in your controller: showConfirm = !showConfirm;

This will update your view automatically using the ng-hide and ng-show directives you already have in place.

Better yet, call a scoped function like:

$scope.toggleConfirm = function() { showConfirm = !showConfirm; }

...and call that in your view using ng-click="toggleConfirm()" to keep your code DRY.

Upvotes: 3

Related Questions