Znowman Znowman - 3 months ago 17
AngularJS Question

angularjs resetting input fields to default values

Have a couple of input fields which are set to default values, want to be able to reset them to their default values with a button if there is any input in the fields.

<div class=form name="searchForm">
<ul><select data-ng-model="ContinentValue">
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="South America">South America</option>
<option value="North America">North America</option>
<option value="Africa">Africa</option>
<option value="Oceania">Ociania</option>
<ul><label>Population Greater than</label></ul>
<ul><input type="number" data-ng-model="popValueMin"></ul>
<ul><label>Lesser than</label></ul>
<ul><input type="number" data-ng-model="popValueMax"></ul>

<ul><label>Government Form</label></ul>
<ul><input type="text" data-ng-model="govForm"></input></ul>
<ul><label>Country name</label></ul>
<ul><input type="text" data-ng-model="countName"></input><ul>
<div data-ng-controller="resetCtrl">
<button data-ng-click="resetModel()">Reset</button>

Three input values are set to default in my allController:

$rootScope.popValueMax = parseInt("146934000");
$rootScope.ContinentValue = "Europe";
$rootScope.popValueMin = parseInt("0");

Using another controller to reset:

controllers.controller("resetCtrl", ["$rootScope", function($rootScope) {

$rootScope.resetModel = function(){
$rootScope.popValueMax = parseInt("146934000");
$rootScope.ContinentValue = "Europe";
$rootScope.popValueMin = parseInt("0");
$rootScope.govForm = "";
$rootScope.countName = "";


Been looking around at many similar threads here, tried alot of the solutions available but nothing seems to work.




  <button data-ng-click="resetCtrl.resetModel()">Reset</button>


  <button data-ng-click="resetModel()">Reset</button>

EDIT: It is not recommended to use $rootScope, also with your code you are not resetting any new value, only the default values are assigned again. Change it to something like this,

$scope.resetModel = function() {
    $scope.popValueMax = parseInt("146934000");
    $scope.ContinentValue = "Europe";
    $scope.popValueMin = parseInt("0");
    $scope.govForm = "";
    $scope.countName = "";