angularjs resetting input fields to default values

Question

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">
    <li><ul><label>Continent</label></ul>
            <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>
                    </select>
            </ul>
    <li>
        <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>
    </li>


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

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.

do you really need another controller just to reset ? Is it ok for you if everything is in one controller ? and to be clear you just want to set the values to initial values and click of a button ryt ? — ngCoder
– ngCoder, Commented Oct 11, 2016 at 16:14
Yes, just want to be able to reset the values to default. Been running it in the allController which is the main controller, same result there. — Znowman
– Znowman, Commented Oct 11, 2016 at 16:18

Sajeetharan · Accepted Answer · 2016-10-11 16:12:56Z

2

Change,

From

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

To

  <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 = "";
  };

DEMO

edited Oct 11, 2016 at 16:12

answered Oct 11, 2016 at 15:29

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Znowman Over a year ago

Forgot to remove that, not working as "resetModel()" either.

Sajeetharan Over a year ago

@Znowman You have done a silly mistake there, you are not actually reseting any value. all the values are same, so you dont see the change on ui. Check the demo i attached

Znowman Over a year ago

Resets the input fields, but the search function stopped.

Sajeetharan Over a year ago

What do you mean by that

Znowman Over a year ago

Printing the objects from the database further down in the html doc, and filtering through the input fields with ng-model="variableName".

Collectives™ on Stack Overflow

angularjs resetting input fields to default values

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related