Angular how to dynamically show/hide div on scope change?

Question

i would like to display div with error message in case that POST request in login form has not been processed successfully (without page partition reload).

I tried to do it by this way:

Template:

<div class="container">

    <form class="form-signin" data-ng-controller="UsersCtrl"
        ng-submit="loginUser(credentials)">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input required type="email" value="test@gmail.com" class="input-block-level"
            placeholder="Email address" id="email"
            ng-model="credentials.email"> 
        <input required type="password"
            class="input-block-level" value="dwdw" placeholder="Password" id="password"
            ng-model="credentials.password"> 
        <label class="checkbox">
            <input type="checkbox" value="remember-me"> Remember me
        </label>
        <button class="btn btn-large btn-primary" type="submit">Sign
            in</button>
    </form>

</div>
<!-- /container -->

<span  ng-show ="$scope.loginDone == true" >
  I'm removed when the checkbox is unchecked.
</span>

In method of the User controller and method loginUser i'm using this:

orders.controller('UsersCtrl', function($scope, $http, $rootScope) {
/**
 * Login 
 * @param {String} email 
 * @param {Password} password (plain text)
 * @return {String} access_token
 */
$scope.loginUser = function() {
    console.log('Trying to login');
    var email = $scope.credentials.email;
    var password = $scope.credentials.password;
    var requestUrl = $rootScope.apiBaseUrl + "user/login";
    var postData = {
            "data": {
                "email": email,
                "password": password
        }
    };

    $http({
        method : 'POST',
        url : requestUrl,
        data: postData
    }).success(function(data, status, headers, config) {
        console.log('Valid user');
        console.log(data);
        $scope.loginDone = true;
        // this callback will be called asynchronously
        // when the response is available
    }).error(function(data, status, headers, config) {
        console.log('Not Valid user');
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

};

Sure, I can use Jquery for this but Angular seems to be better for this.

Thanks for any advice.

Answer 1

Your ng-controller should be defined on an element that includes all your bindings. Create an outer div with ng-controller:

<div data-ng-controller="UsersCtrl">
    <div class="container">

    <form class="form-signin" ng-submit="loginUser(credentials)">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input required type="email" value="test@gmail.com" class="input-block-level"
            placeholder="Email address" id="email"
            ng-model="credentials.email"> 
        <input required type="password"
            class="input-block-level" value="dwdw" placeholder="Password" id="password"
            ng-model="credentials.password"> 
        <label class="checkbox">
           <input type="checkbox" value="remember-me"> Remember me
        </label>
        <button class="btn btn-large btn-primary" type="submit">Sign
            in</button>
    </form>

    </div>
    <!-- /container -->

    <span  ng-show ="loginDone == true" >
      I'm removed when the checkbox is unchecked.
     </span>
</div>

Also, you should not reference $scope in the HTML:

 <span  ng-show ="loginDone == true" >
   I'm removed when the checkbox is unchecked.
 </span>

Answer 2

Use ng-show tag in your div with some boolean value that will be set in your controller like this:

html:

<div ng-show="isOk"></div>

angular:

$scope.isOk = true;

Answer 3

To do that:

<div ng-show="loginErrors.length">
   <!-- some cool stuff -->
</div> 

AngularJS

 $scope.myLoaderMethod = function() {
      myCall().success(function () {
         // validate user
      }).error(function (errors) {
         $scope.loginErrors = errors;
      });
 };