Geek Answers Handbook

How to check if input field has value in controller using AngularJS

I'm just trying to figure out how I can get scale information to find out if it matters or not in the controller.

I need to write an if statement that says if this text input field is full, do it ... if something else.

<form name="deadlineForm">
    <div class="app-select-date">
        <label for="deadline">Select deadline:</label>
        <input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline"/>
    </div>
</form>

What is the best way to write this code in a controller?

+4
source share
6 answers

You are bound to variable ( deadline) with ng-model="deadline".

Your check in the controller becomes as simple as:

if ($scope.deadline != null && $scope.deadline != "") {
    //do something
}

or it can even be simplified to

if ($scope.deadline) {
    //do something
}

Simple JSFiddle DEMO .

+3
source

?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
  angular.module('app', [])
  .controller('MainCtrl', function ($scope) {
    
    $scope.$watch('val', function (now, old) {
      if (now) {
        $scope.result = 'there is something';
      } else {
        $scope.result = 'there is nothing';
      }
    });
  });
</script>

<div ng-app='app' ng-controller='MainCtrl'>
  <input type="text" ng-model="val">  
  <span ng-bind='result'>
</div>
Hide result
+2

,

$scope.deadline

,

if($scope.deadline) {  //or whatever condition you have to check null or empty
   //anything you want to do
}
+1

:

<form name="deadlineForm">
    <div class="app-select-date" ng-if="deadline && deadline != ''">
        <label for="deadline">Select deadline:</label>
        <input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline"/>
    </div>
    <div ng-if="!deadline && deadline == ''">do something else</div>
</form>
+1

, : DEMO

HTML:

<p>Data {{deadline}}!</p>
<div ng-if="deadline">There is date</div>
<div ng-if="!deadline">There is no date</div>

Only for testing
<button ng-click="makeDateEmpty()">Empty data</button>

:

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

app.controller('MainCtrl', function($scope) {
    $scope.deadline = '02/02/2002';
    //For testing only
    $scope.makeDateEmpty = function () {
           $scope.deadline = "";
    }
});
0

ng- , , $scope .

JavaScript , .

, $scope.deadline , .

, , .

, ,

if ($scope.deadline) {
   // do something
} else {
  // do something else
}

.

If you want to activate your logic at the moment the input field changes, you can use the $ watch directive in the controller, as Konpat Ta Preechakul suggested , or you can add the ng-change or ng-blur attribute to your input and call the function from the controller:

<input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline" ng-change="selectedDate()"/>

and

$scope.selectedDate = function(){
    if ($scope.deadline) {
       // do something
    } else {
      // do something else
    }
}

If you want conditional logic arose as a direct representation tied to the value of real-time values in the input field, then ng-if, ng-showand ng-hidemay be helpful:

<span ng-show="deadline">Show this if deadline has a value</span>
<span ng-hide="deadline">Don't show this if deadline has a value</span>
<span ng-if="!deadline">Don't render this into the DOM at all if deadline doesn't have a value</span>
0
source

More articles:


All Articles