AngularJS toggle from controller

Question

I'm using AngularJS showhide here http://angular-ui.github.io/ui-utils/ this is what I have:

<div ui-toggle="showHide">
               <div class="col-md-12">
                  <input class="form-control" id="id_password" name="password"
                     type="password"  ng-model="password" placeholder="Password">
               </div>
            </div>


<p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>

This works however, how can I control the toggle directly from a controller?

You can set showHide in your controller: $scope.showHide = !$scope.showHide; Although I'd just use the ng-show and ng-hide directives. — m.e.conroy
– m.e.conroy, Commented Nov 26, 2013 at 14:16
could I see an example of the ng-show and ng-hide directives and how to use them? — GrantU
– GrantU, Commented Nov 26, 2013 at 14:21

m.e.conroy · Accepted Answer · 2013-11-26 14:29:59Z

7

Here's a fiddle showing the use of ng-show and ng-hide

http://jsfiddle.net/mikeeconroy/WUc94/

angular.module('myApp',[])
.controller('myCtrlr',['$scope',function($scope){
   $scope.show = true;

   $scope.toggle = function(){
      $scope.show = !$scope.show;
   };
}]);

HTML:

<div ng-app="myApp">
    <div ng-controller="myCtrlr">
        <div ng-show="show">I'm using ngShow!!!</div>
        <div ng-hide="show">I'm using ngHide!!!</div>
        <div>Value of "show": <strong>{{show}}</strong></div>
        <button ng-click="toggle()">Toggle</button>
    </div>
</div>

You could just as easily use one of the directives too:

<div ng-show="show">I'm using ngShow (show == true)</div>
<div ng-show="!show">I'm using ngShow (show == false)</div>

answered Nov 26, 2013 at 14:29

m.e.conroy

3,53828 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS toggle from controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related