AngularJS | Is It Positive OR Negative Number? | Tutorial #16
In AngularJS, there are many built-in filters that can be used to manipulate data in various ways. One such filter is the "isPositive" filter, which can be used to determine if a given number is positive or negative. In this tutorial, we will learn how to use the "isPositive" filter to check if a number is positive or negative.
Step 1: Setting up AngularJS
First, make sure you have AngularJS installed in your project. You can either download it and include it in your project manually, or use a content delivery network (CDN) to include it in your HTML file. If you are using a CDN, you can include AngularJS in your HTML file like this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>Step 2: Creating an AngularJS Module and Controller
Next, create an AngularJS module and controller in your HTML file. Here’s an example of how you can do this:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Is It Positive or Negative Number Tutorial</title>
</head>
<body>
<div ng-app="isPositiveApp" ng-controller="isPositiveCtrl">
</div>
<script>
angular.module('isPositiveApp', [])
.controller('isPositiveCtrl', function($scope) {
// Controller logic will go here
});
</script>
</body>
</html>Step 3: Adding a Number Input Field
Next, let’s add an input field to allow the user to input a number. We will bind this input field to a variable in our controller using AngularJS’s two-way data binding. Here’s an example of how you can do this:
<input type="number" ng-model="inputNumber" placeholder="Enter a number">Step 4: Using the isPositive Filter
Now, let’s use the "isPositive" filter to determine if the input number is positive or negative. We will create a new variable in our controller called "isPositive" and use the filter in the HTML to display whether the number is positive or negative. Here’s how you can do this:
<p>Number is {{inputNumber}}</p>
<p>Number is {{inputNumber | isPositive}}</p>In the controller, you will need to define the "isPositive" filter. You can do this by using the $filter service provided by AngularJS. Here’s an example of how you can define this filter:
angular.module('isPositiveApp', [])
.controller('isPositiveCtrl', function($scope, $filter) {
$scope.inputNumber = 0;
// Custom isPositive filter
$filter('isPositive', function() {
return function(input) {
if (input > 0) {
return 'positive';
} else if (input < 0) {
return 'negative';
} else {
return 'zero';
}
};
});
});Step 5: Testing the Application
Finally, save your changes and open your HTML file in a web browser. You should see an input field where you can enter a number. As you type in a number, you should see the text below it change to display whether the number is positive, negative, or zero.
Conclusion
In this tutorial, we learned how to use the "isPositive" filter in AngularJS to determine if a number is positive or negative. By using custom filters like this, you can manipulate data in various ways and create dynamic user experiences in your AngularJS applications.
