コントローラで入力フィールドが空であるかどうかをチェックする - AngularJS

Question

ちょうどAngularJSの学習を始めました。私が書いたテストプログラムでは、自分の入力フィールドが空であるかコントローラ（スクリプト）の中にないかをチェックする必要があります。続き

は、私がここで

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

を書いたコードであり、出力として、私はpls enter somethingを見て期待していました。しかし私は何も見ることができません。

しかし、小さな変更を加えてスクリプトをフォローすると、期待通りにSomething Enteredと表示されます。

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

ここで何が間違っていますか？私が理解する限り、第2のものが期待どおりに機能するなら、第1のものは動作するはずです。それ以外の場合は、両方とも機能しません。

私は非常に基本的な何かを理解していないと思う。もしそうなら、私が何を読んでいないかを教えてください。

ありがとうございました！

Answer 1

問題は、スコーププロパティが1回だけ入力されているかどうかを確認していることです。 （これは、角度がコントローラを初期化するときに発生します） あなたが行う必要があるのは、htmlに変更を追加し、モデルが変更されたときに関数が再び発生することです。

あなたのロジックをもう一度やり直してください。以下のようなので：あなたのhtmlで、その後

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"; 
      } 
     } 

    }); 

：

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

Answer 2

は、配列と.length作品を、この1と試みる関数を作成し、

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

Answer 3

もChangeイベントでそれを呼び出します。ここでは配列の型が$scope.userFirstNameではありません。

が

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

のようにそれを修正ここplunkerを見つけてください：https://plnkr.co/edit/7gc3fj8apFJnE2wNJbQ7?p=preview

は、それはあなたのお役に立てば幸い！

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"; 
     } 
    } 

});