Проверьте, пусто ли поле ввода в контроллере - 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> 

Что здесь не так? Насколько я понимаю, первый должен работать, если второй работает так, как ожидалось. В противном случае оба не должны работать.

Я думаю, что я не понял что-то очень основное. Если да, опишите, о чем я не читал.

спасибо ..!

Answer 1

Проблема в том, что вы проверяете, только ли свойство scope заполнено. (это происходит, когда угловой инициализирует контроллер) Что вам нужно сделать, это добавить ng-изменение в 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"; 
      } 
     } 

    }); 

затем в вашем HTML:

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

Answer 2

попробовать с этим, создать функцию и вызвать ее по изменению события

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

Answer 3

хорошо, .length работы с массивом. здесь у вас нет типа $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"; 
     } 
    } 

});