Question

我创建了用于业务验证的示例程序，此处显示错误消息，但其未显示特定错误字段，如何解决此问题，

提前致谢............................................ .....................

＆＃13;

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  
  
  $scope.save=function()
  {  
    
    
     if($scope.firstName == undefined)
      {
          $('#popup1').fadeIn($(this).data());
	     // in the RC of 1.3 there is function.link only the function customs Validation.compile which
         // needs to be invoked to get at the functions.
			 	setTimeout(function(){
					 $('#popup1').fadeOut($(this).data());
					  },3000);
  			 var element = window.document.getElementById('firstName');
                  if (element)
                    element.focus(); 
     
      }
    if($scope.lastName = undefined){
  
          $('#popup1').fadeIn($(this).data());
	     // in the RC of 1.3 there is function.link only the function customs Validation.compile which
         // needs to be invoked to get at the functions.
			 	setTimeout(function(){
					 $('#popup1').fadeOut($(this).data());
					  },3000);
  			 var element = window.document.getElementById('lastName');
                  if (element)
                    element.focus(); 
  }
   
      }
});

＆＃13;

 
 
.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 20px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}
@media (min-width: 32em) {
 .modal-box { width: 180px; top: 215px; left: 390px; }
}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;
}

 

.modal-box .modal-body { padding:22px;  background-color: #dd4b39;
border-radius: 20px;    height: 0px;
    color: white;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body >
  
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
 
  <input type="submit" ng-click="save()">

</div>
  <div id="popup1" class="modal-box">
                           <div class="modal-body">
                            <span style="position:absolute;top:10px;">Please Enter the Value </span>
                          </div>
 					</div>
  
  
</body>

＆＃13;

Answer 1

当angular具有自我验证功能/操作时，为什么选择这种方式在表单字段上执行验证。 当你使用angularJs时，你的方法不够好，不能被视为最佳实践

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">

<p>Try leaving the first input field blank:</p>

<form name="myForm">
<p>Name:
<input name="firstName" ng-model="firstName" required>
<span ng-show="myForm.firstName.$touched && myForm.firstName.$invalid">The First name is required.</span>
</p>

<p>Adress:
<input type="text" name="lastName" ng-model="lastName" required>
<span ng-show="myForm.lastName.$touched && myForm.lastName.$invalid">The Addressis required.</span>
</p>

</form>

</body>
</html>

在此之后，您可以自定义用于错误的跨度样式以及用于动画效果的JQUERY样式。在你的外部css＆amp; Js脚本。

它也被认为是angularjs的最佳实践。同时也减少了手动编写jquery代码以进行验证的麻烦。谢谢＆amp;干杯：）

Answer 2

我编辑您的代码请比较并验证

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>

<style type="text/css">
    .modal-box 
    {
        display: none;
        position: absolute;
        z-index: 1000;
        width: 98%;
        background: white;
        border-bottom: 1px solid #aaa;
        border-radius: 20px;
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(0, 0, 0, 0.1);
        background-clip: padding-box;
    }

    @media (min-width: 32em) 
    {
        .modal-box { width: 180px; top: 215px; left: 390px; }
    }

    .modal-box header,
    .modal-box .modal-header 
    {
        padding: 1.25em 1.5em;
        border-bottom: 1px solid #ddd;
    }


    .modal-box .modal-body 
    { 
        padding:22px;  background-color: #dd4b39;
        border-radius: 20px;    height: 0px;
        color: white;
    }
</style>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <input type="submit" ng-click="save()">

        <div id="popup1" class="modal-box">
            <div class="modal-body">
                <span style="position:absolute;top:10px;">{{error}}</span>
            </div>
        </div>

    </div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function ($scope,$http,$sce) 
{
    $scope.save=function()
    {  
        if($scope.firstName == undefined)
        {
            $('#popup1').fadeIn($(this).data());

            setTimeout(function()
            {
                $('#popup1').fadeOut($(this).data());
            },3000);

            var element = window.document.getElementById('firstName');
            if (element)
                element.focus(); 

            $scope.error = "Please enter first name.";
            return;
        }

        if($scope.lastName == undefined)
        {
            $('#popup1').fadeIn($(this).data());

            setTimeout(function()
            {
                $('#popup1').fadeOut($(this).data());
            },3000);

            var element = window.document.getElementById('firstName');
            if (element)
                element.focus(); 

            $scope.error = "Please enter last name.";
            return;
        }
    }
});

</script>
</body>
</html>

使用angularJs在错误字段上显示模态窗口（弹出窗口）警报

2 个答案: