Question

如果登录表单中的POST请求未成功处理（没有重新加载页面分区），我想显示带有错误消息的div。

我试着这样做：

模板：

<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-controller应该在包含所有绑定的元素上定义。使用ng-controller创建外部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中引用$ scope：

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

Answer 2

在div中使用ng-show标签，并在控制器中设置一些布尔值，如下所示：

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

Angular如何在范围变化时动态显示/隐藏div？

3 个答案: