模態窗口（彈出）誤差現場警戒節目使用angularJs

我創建的樣本程序的業務驗證，此錯誤消息顯示，但它沒有顯示具體的錯誤領域，如何解決這個問題，模態窗口（彈出）誤差現場警戒節目使用angularJs

在此先感謝。 .................................................. ..............

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

 
app.controller('myCtrl', function($scope) { 
 
    
 
    
 
    $scope.save=function() 
 
    { 
 
    
 
    
 
    if($scope.firstName == undefined) 
 
     { 
 
      $('#popup1').fadeIn($(this).data()); 
 
\t  // 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. 
 
\t \t \t \t setTimeout(function(){ 
 
\t \t \t \t \t $('#popup1').fadeOut($(this).data()); 
 
\t \t \t \t \t },3000); 
 
    \t \t \t var element = window.document.getElementById('firstName'); 
 
        if (element) 
 
        element.focus(); 
 
     
 
     } 
 
    if($scope.lastName = undefined){ 
 
    
 
      $('#popup1').fadeIn($(this).data()); 
 
\t  // 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. 
 
\t \t \t \t setTimeout(function(){ 
 
\t \t \t \t \t $('#popup1').fadeOut($(this).data()); 
 
\t \t \t \t \t },3000); 
 
    \t \t \t 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> 
 
    \t \t \t \t \t </div> 
 
    
 
    
 
</body>

來源

2016-02-29 Nelson

你爲什麼都選擇這種方式來開展表單字段驗證時的角度有自我驗證˚F unctions /操作。當你與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 & Js腳本。

它也被認爲是angularjs的最佳實踐。還可以減少手動編寫jQuery代碼以進行驗證的麻煩。由於&乾杯:)

來源

2016-02-29 07:05:01

我編輯代碼，請比較和驗證

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

來源

2016-02-29 07:07:40

模態窗口（彈出）誤差現場警戒節目使用angularJs

回答

相關問題