I'm using AngularJS showhide here / 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?

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?

• javascript
• angularjs

• 2 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 Commented Nov 26, 2013 at 14:16
• 1 could I see an example of the ng-show and ng-hide directives and how to use them? – GrantU Commented Nov 26, 2013 at 14:21

1 Answer 1

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

http://jsfiddle/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>