Angular如何動態顯示/隱藏div的範圍更改？

Question

我想顯示錯誤消息的div，以防登錄表單中的POST請求沒有成功處理（沒有頁面分區重新加載）。

我試圖通過這種方式來做到這一點：

模板：

<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> 

在用戶控制器和控制方法loginUser的方法我使用這個：

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. 
    }); 

}; 

當然，我可以使用Jquery，但Angular似乎對此更好。

感謝您的任何建議。

Answer 1

您的ng控制器應該定義在包含所有綁定的元素上。與NG-控制器創建外層div：

<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> 

而且，你不應該引用$範圍在HTML：

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

Answer 2

使用NG-顯示標籤在你的分度，將在您的控制器中設置一些這樣的布爾值：

HTML：

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

角：

$scope.isOk = true; 

Answer 3

要做到即：

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

AngularJS

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