0

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?

Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
esafwan
  • 17,311
  • 33
  • 107
  • 166
  • 6
    Please see: [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/q/14994391/1313143). – MarioDS Oct 02 '14 at 17:50
  • 1
    https://docs.angularjs.org/guide/forms has information on validation.. – Smern Oct 02 '14 at 17:51

1 Answers1

3

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.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180