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

Modal window (popup) alert show on error field using angularJs

本文关键字：窗口 angularJs 错误 字段 显示 模态      更新时间：2023-09-26

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

提前感谢

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

为什么当 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>

在此之后，您可以自定义用于错误的span的样式以及用于动画效果的JQUERY。在你的外部css和js脚本中。

它也被认为是angularjs的最佳实践。也减少了手动编写jquery代码进行验证的麻烦。谢谢和干杯:)

我编辑您的代码请进行比较和验证

<!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>
相关文章：