AngularJS Show and Hide

0
votes

Hi guys i want to show and hide div on modal-popup in angularjs(bootstrap3.3) following is the code i have written , on page load the required myModal_username1is displayed but on click of submit when the controller function is called the myModal_username1 is supposed to be visiblely false and other div should be visibly true.. but same is not happeing.

Controller Code:

angular.module('ratefastApp')
  .controller('LoginCtrl', function ($scope, Auth, $location) {
 $scope.showUser = 'true';
 $scope.x= function(form) {
 $scope.showPass = 'false';
}}

view :

<div class="modal fade" id="myModal_username" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Forgot your Username ?</h4>
      </div>
      <!-- div check -->

  <div ng-show="showUser" id="myModal_username1" class="modal-body"
 ng-include src="'views/partials/forgotstage_username.html'">      
       </div>
      <!-- div question -->

  <div ng-hide="showUser" id="myModal_username2" class="modal-body"
 ng-include src="'views/partials/forgot_username.html'">       
       </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
1
angularjs

1 Answers

0
votes

The x() function (whose name is really awful, BTW) doesn't change the value of showUser, which is used by the view. It initializes a new scope field named showPass:

 $scope.showPass = 'false';

Also, ng-include has its own scope, inheriting from the controller scope. Setting a field in this child scope will thus add the field to the child scope, but won't change the value of the field in the controller scope.

You also shouldn't use strings for booleans. Use true and false, not 'true' and 'false'.

So the code should be:

$scope.visibility = {
    showUser: true
}

$scope.submit = function(form) {
    $scope.visibility.showUser = false;
}