I'm quite simply trying to find out how I can retrieve the scopes information to see if it has a value or not in the controller.
I need to be able to write an if statement that says if this text input field is filled do this... if else do something different.
<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 about writing this code in the controller?
I'm quite simply trying to find out how I can retrieve the scopes information to see if it has a value or not in the controller.
I need to be able to write an if statement that says if this text input field is filled do this... if else do something different.
<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 about writing this code in the controller?
Share Improve this question edited Aug 2, 2017 at 7:21 Ganesh Yadav 2,6852 gold badges33 silver badges52 bronze badges asked Aug 13, 2015 at 12:30 Max LynnMax Lynn 1,7786 gold badges25 silver badges35 bronze badges6 Answers
Reset to default 3You have it bound to a variable (deadline) using ng-model="deadline".
Your check in the controller bees as simple as:
if ($scope.deadline != null && $scope.deadline != "") {
//do something
}
or this can be even simplified to
if ($scope.deadline) {
//do something
}
Simple JSFiddle DEMO.
Will this work for you ?
<script src="https://ajax.googleapis./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>
You will get the value in the input as,
$scope.deadline
you can check as ,
if($scope.deadline) { //or whatever condition you have to check null or empty
//anything you want to do
}
As from what I understand here it is:
<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>
Please check working example : 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>
Controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.deadline = '02/02/2002';
//For testing only
$scope.makeDateEmpty = function () {
$scope.deadline = "";
}
});
Using ng-model automatically binds any value entered into the input to a $scope variable of the same name.
This variable bees available to plain JavaScript within your controller when you inject a dependency upon scope into it.
So $scope.deadline will give the current value of text entered into that input.
How you check that value depends on the context of when you'd like to check it.
If you're in an existing function, such as a function checking field validation upon form submission, a simple
if ($scope.deadline) {
// do something
} else {
// do something else
}
would suffice.
If you're looking to trigger your logic the moment that input field changes, in the controller you could use the $watch directive, as Konpat Ta Preechakul suggested, or you could add an ng-change or ng-blur attribute to your input, and call a controller-side function:
<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 to occur directly in the view, bound real-time to values in the input field, then ng-if, ng-show, and ng-hide can 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>