Css 如何在angular js中定位ngshow消息_Css_Angularjs

Css 如何在angular js中定位ngshow消息

css angularjs

Css 如何在angular js中定位ngshow消息,css,angularjs,Css,Angularjs,如何让ng在文本框旁边而不是下面显示消息。现在，它正在输入框下面显示所有验证消息 <!DOCTYPE html> <html ng-app="myApp" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="http://maxcdn.boots

如何让ng在文本框旁边而不是下面显示消息。现在，它正在输入框下面显示所有验证消息

<!DOCTYPE html>
<html ng-app="myApp" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script>
            "use strict";
            var app = angular.module('myApp', []);

            app.controller('MainCtrl', function ($scope) {
                $scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
                $scope.submit = function ($event) {
                    if ($scope.myForm.$invalid) {
                        // Or some other update
                        $scope.myForm.$submitted = true;
                        $event.preventDefault();
                    }
                };
            });
            app.directive('uniqueUsername', function ($http) {
                return {
                    restrict: 'A',
                    require: 'ngModel',
                    link: function (scope, element, attrs, ngModel) {
                        element.bind('blur', function (e) {
                            ngModel.$setValidity('unique', true);

                            $http.post('CheckUserName2.do').success(function (data) {
                                if (data) {
                                    ngModel.$setValidity('unique', false);
                                }
                            });
                        });
                    }
                };
            });
        </script>
    </head>
    <body ng-controller="MainCtrl">
        <div class="container">
            <div class="col-md-6 col-md-offset-0">
                <div class="panel panel-login">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <h2 class="text-muted">Registration form</h2>
                                <div>
                                    <form name="myForm" action="RegistrationServlet.do" method="POST" >
                                        First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" unique-username="" placeholder="First Name" required/>
                                        <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
                                        <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
                                        <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span>
                                        <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


“严格使用”；
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.cityArray=[“海得拉巴”、“塞坎德拉巴德”、“德里”、“孟买”]；
$scope.submit=函数（$event）{
if（$scope.myForm.$invalid）{
//或者其他更新
$scope.myForm.$submitted=true；
$event.preventDefault（）；
}
};
});
app.directive（'uniqueUsername'，函数（$http）{
返回{
限制：“A”，
要求：'ngModel'，
链接：功能（范围、元素、属性、模型）{
元素绑定（'blur'，函数（e）{
ngModel.$setValidity（'unique'，true）；
$http.post（'CheckUserName2.do'）.success（函数（数据）{
如果（数据）{
ngModel.$setValidity（'unique'，false）；
}
});
});
}
};
});
登记表
名字：
名字不能少于3个没有数字的字母
请填写上面的字段


用户名已存在

提交

这是您右边没有空间在输入框旁边显示错误消息的地方。将错误消息放在submit按钮上方会导致一个小的UI问题：每次出现错误时，表单提交按钮都会垂直闪烁。即。 -提交表单而不输入任何输入以获取错误消息。 -在输入框中键入/删除任何字符以查看闪烁

解决方法：

请将错误消息保持在“提交”按钮下方，或为错误消息提供专用高度，以避免产生不良影响，或两者兼而有之

  <form name="myForm" action="RegistrationServlet.do" method="POST" >
      First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" unique-username="" placeholder="First Name" required/><br><br>
      <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
      <div style="height=100px">
        <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
        <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
        <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span>
      </div> 
  </form>


名字：


提交
名字不能少于3个没有数字的字母
请填写上面的字段


用户名已存在

在它旁边的什么地方？你右边没有空间，没错。如何在它旁边创建空间。我对CSS不是很在行，你不能输入全宽。听起来不错。但是，我有大约10个字段，用户可能需要向下滚动才能看到错误消息。或者，是否可以调整彼此相邻的输入字段以使表单看起来更小（我的意思是降低整体高度以避免滚动）可能会出现如下错误消息：@kittu:类似于这样的信息？确切地说，这正是我所要寻找的，但在右边稍微多了一点空间，以显示未展开的文本，使用

col-xs-12

，而不是

col-md-6

，用于您的

。文本换行是由于窗口小。看见