有毛病我AngularJs代碼

我新的Angularjs，下面是我的代碼，有毛病我AngularJs代碼

<!DOCTYPE html> 
<html> 
    <head> 
     <title>ng-Messages Service</title> 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
     <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script> 
     <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script> 
     <script src="ng-messages.js"></script> 
    </head> 

    <body> 

     <div ng-controller='thecontroller'> 
      <form name="myForm"> 
      <label> 
       Enter text: 
       <input type="text" ng-model="field" name="myField" required minlength="5" /> 
      </label> 
      <div ng-messages="myForm.myField.$error" role="alert"> 
       <div ng-message="required">You did not enter a field</div> 
       <div ng-message="minlength, maxlength"> 
       Your email must be between 5 and 100 characters long 
       </div> 
      </div> 
      </form> 
     </div> 
    </body> 
</html>

及以下angularjs代碼，

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

myApp.controller('thecontroller',function($scope){ 
    $scope.name="Gopal"; 
});

我們沒有得到正確的輸出，什麼是錯的用我的上面的代碼。

感謝

來源

2017-07-03 Gopal Kshirsagar

你所期望的輸出？ –

什麼是「正確的輸出」？你有錯誤嗎？如果是這樣，哪些錯誤？ –

請確保您的問題具有所需的所有信息，以幫助您的人在這裏： https://stackoverflow.com/help/mcve 或者您的問題將在任何時候關閉。 –

你有沒有在你的HTML模板提到ng-app="myApp"。

另外請確保您有參考需要的.js文件。我假設這包括模塊聲明。

<script src="ng-messages.js"></script>

DEMO

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

 
myApp.controller('thecontroller',function($scope){ 
 
    $scope.name="Gopal"; 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>ng-Messages Service</title> 
 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
 
     <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script> 
 
     <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script> 
 
    </head> 
 
    <body ng-app="myApp"> 
 

 
     <div ng-controller='thecontroller'> 
 
      <form name="myForm"> 
 
      <label> 
 
       Enter text: 
 
       <input type="text" ng-model="field" name="myField" required minlength="5" /> 
 
      </label> 
 
      <div ng-messages="myForm.myField.$error" role="alert"> 
 
       <div ng-message="required">You did not enter a field</div> 
 
       <div ng-message="minlength, maxlength"> 
 
       Your email must be between 5 and 100 characters long 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-07-03 11:33:44 Sajeetharan

哦！，我忘了提及ng-app ='myApp'，我現在得到了輸出。 –

You need to specify ng-app="your Module name" to bootstrap the application when index.html page start to load. It triggers the AngularJs life cycle automatically. 
Note- You may also specify the pattern for validating email that is email is valid or not 
    <!DOCTYPE html> 
     <html > 
      <head> 
       <title>ng-Messages Service</title> 
       <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
       <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script> 
       <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script> 
       <script src="ng-messages.js"></script> 
      </head> 

      <body ng-app="myApp"> 

       <div ng-controller='thecontroller'> 
        <form name="myForm"> 
        <label> 
         Enter text: 
         <input type="text" placeholder="[email protected]" ng-model="field" name="myField" data-ng-required="true" minlength="5" maxlength="100" ng-pattern="/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i"/> 
        </label> 
         <div data-ng-show="myForm.myField.$error.required">You did not enter a field</div> 
         <div data-ng-show="myForm.myField.$error.min 
                   || myForm.myField.$error.max"> 
         Your email must be between 5 and 100 characters long 
         </div> 
         <div data-ng-show="myForm.myField.$error.pattern" >The email id is not valid</div 
        </form> 
       </div> 
      </body> 
     </html>

來源

2017-07-03 12:01:29

有毛病我AngularJs代碼

回答

相關問題