Überprüfen, ob das Eingabefeld leer ist in Controller - AngularJS

Question

Ich habe gerade angefangen AngularJS zu lernen. In einem Testprogramm, das ich geschrieben habe, muss ich prüfen, ob mein Eingabefeld leer ist oder nicht im Controller (Skript).

Es folgt der Code, den ich

schrieb

<div ng-controller="ExampleController"> 
    <input type="text" ng-model="userFirstName" required/><br> 
    <p ng-bind="msg"></p> 
</div> 

<script> 
    var mainApp = angular.module("mainApp", []); 
    mainApp.controller('ExampleController', function ($scope) { 

     if($scope.userFirstName.length === 0){ 
      $scope.msg = "pls enter something"; 
     }else{ 
      $scope.msg = "Something Entered"; 
     } 
    }); 
</script> 

Hier, wie der Ausgang, ich pls enter something zu sehen erwartet. Aber ich kann nichts sehen.

Aber wenn ich das Skript zu ändern, um mit einigen kleinen Änderungen folgt, zeigt es mir Something Entered wie erwartet.

<script> 
    var mainApp = angular.module("mainApp", []); 
    mainApp.controller('ExampleController', function ($scope) { 
     $scope.userFirstName = 'Something'; 
     if($scope.userFirstName.length === 0){ 
      $scope.msg = "pls enter something"; 
     }else{ 
      $scope.msg = "Something Entered"; 
     } 
    }); 
</script> 

Was ist hier falsch? Soweit ich verstehe, sollte der erste funktionieren, wenn der zweite wie erwartet funktioniert. Ansonsten sollten beide nicht funktionieren.

Ich denke, ich habe etwas sehr grundlegendes nicht verstanden. Wenn ja, beschreibe mich bitte, worüber ich nicht gelesen habe.

Vielen Dank ..!

Answer 1

Das Problem besteht darin, dass Sie nur überprüfen, ob die Bereichseigenschaft einmal ausgefüllt ist. (Dies passiert, wenn der Winkel den Controller initialisiert). Was Sie tun müssen, ist eine ng-Änderung zum html hinzuzufügen und dann, wenn sich das Modell ändert, wird die Funktion erneut ausgelöst.

In der Funktion machen Sie Ihre Logik wieder. etwa so:

var mainApp = angular.module("mainApp", []); 
    mainApp.controller('ExampleController', function ($scope) { 
     $scope.userFirstName = ''; 
     $scope.checkContent = function(){ 
      if($scope.userFirstName.length === 0 || typeof $scope.userFirstName === 'undefined'){ 
      $scope.msg = "pls enter something"; 
      }else{ 
      $scope.msg = "Something Entered"; 
      } 
     } 

    }); 

dann in Ihrem html:

<div ng-controller="ExampleController"> 
    <input type="text" ng-change="checkContent()" ng-model="userFirstName" required/><br> 
    <p ng-bind="msg"></p> 
</div> 

Answer 2

mit diesem versuchen, Funktion erstellen und auf Change-Ereignisse nennt

if(!$scope.userFirstName || $scope.userFirstName == null){ 
       $scope.msg = "pls enter something"; 
      }else{ 
       $scope.msg = "Something Entered"; 
      } 

Answer 3

gut, .length Arbeiten mit einem Array. Hier haben Sie keinen Typ von $scope.userFirstName als Array.

modifizieren wie

<div ng-controller="ExampleController"> 
    <input type="text" ng-model="userFirstName" required="" /> 
    <br /> 
    <p ng-bind="msg"></p> 
</div> 
<script> 
    var mainApp = angular.module("mainApp", []); 
    mainApp.controller('ExampleController', function ($scope) { 
    $scope.userFirstName = ''; 
    if($scope.userFirstName === ''){ 
     $scope.msg = "pls enter something"; 
    }else{ 
     $scope.msg = "Something Entered"; 
    } 
    }); 
</script> 

Bitte finden Plunker hier: https://plnkr.co/edit/7gc3fj8apFJnE2wNJbQ7?p=preview

Hoffe, dass es Ihnen hilft!

Answer 4

var mainApp = angular.module("mainApp", []); 
mainApp.controller('ExampleController', function ($scope) { 
    $scope.userFirstName = ''; 
    $scope.checkContent = function(){ 
     if($scope.userFirstName)//Check Empty Field 
     { 
      $scope.msg = "pls enter something"; 
     }else{ 
      $scope.msg = "Something Entered"; 
     } 
    } 

});