In AngularJS, clearing a model value is as simple as setting the model to an empty value or null. Here’s a basic example:
- Create an AngularJS module and controller:
JS Code
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.myModel = 'Hello, World!';
$scope.clearModel = function() {
$scope.myModel = '';
};
});
In this example, we have a model called myModel with an initial value of ‘Hello, World!’. We also define a function called clearModel that sets the value of myModel to an empty string, effectively clearing its value.
- Create an input field bound to the model and a button to clear the model:
HTML Code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<input type="text" ng-model="myModel">
<button ng-click="clearModel()">Clear Model</button>
</body>
</html>
In the HTML, we have an input field that is bound to the myModel value using the ng-model directive. We also have a button that calls the clearModel function when clicked.
When you click the “Clear Model” button, the value of the input field will be cleared. The complete example is as follows:
index.html – Main HTML file:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<input type="text" ng-model="myModel">
<button ng-click="clearModel()">Clear Model</button>
</body>
</html>
app.js – Main JavaScript file:
eangular.module('app', [])
.controller('MainController', function($scope) {
$scope.myModel = 'Hello, World!';
$scope.clearModel = function() {
$scope.myModel = '';
};
});
This example demonstrates how to clear a model value in AngularJS by setting it to an empty string or null. When the “Clear Model” button is clicked, the clearModel function is called, and the value of myModel is set to an empty string, clearing the input field.
Here is the complete example of clearing a model value in AngularJS:
index.html– Main HTML file:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<input type="text" ng-model="myModel">
<button ng-click="clearModel()">Clear Model</button>
<p>Model value: {{myModel}}</p>
</body>
</html>
app.js– Main JavaScript file:
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.myModel = 'Hello, World!';
$scope.clearModel = function() {
$scope.myModel = '';
};
});
In this example, we have an input field bound to the myModel value using the ng-model directive. The initial value of myModel is ‘Hello, World!’. We also have a button that calls the clearModel function when clicked. Below the button, the current value of myModel is displayed using AngularJS’ double curly brace ({{myModel}}) syntax.
When you click the “Clear Model” button, the value of the input field will be cleared, and the displayed value of myModel will be updated to an empty string. This demonstrates how to clear a model value in AngularJS by setting it to an empty string.
