How to reset ng-model variables to Null in AngularJS?

Question

In AngularJS, I have the following sample code:

<select style="margin-left:5px;width:60px" id="product" ng-model="output.product">
<select style="margin-left:5px;width:60px" id="status" ng-model="output.status">

Within my UI screen, I have a button where the user can reset select drop-down values for both product and status but I am unsure how to reset both my ng-model scope output values to null for output.product and output.status.

I have tried scope.output = ""; but this doesn't seem to work.

Again, I have using AngularJS (v1.1).

georgeawg · Accepted Answer · 2019-05-13 14:16:45Z

I am not going to write an answer for AngularJS V1.1 because that version is no longer supported. See AngularJS Version Support Status.

For version 1.7, reset the select by setting the model to null:

  $scope.reset = function() {
      $scope.choice.product = null;
      $scope.choice.status = null;
  };

The DEMO

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.choice = {};
  $scope.productChoices = ['product A', 'product B', 'product C', 'product D', 'product E'];
  $scope.statusChoices = ['active', 'pending', 'completed', 'cancelled'];

  $scope.reset = function() {
      $scope.choice.product = null;
      $scope.choice.status = null;
  };   
});

<script src="//unpkg.com/angular/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  Select a product:
  <select ng-model="choice.product" ng-options="prd for prd in productChoices">
      <option value="">Select a product</option>
  </select>
  <br/> Select a status:
  <select ng-model="choice.status" ng-options="prd for prd in statusChoices">
      <option value="">Select a status</option>
  </select>

  <hr/> selected product: {{choice.product}}
  <br/> selected status: {{choice.status}}
  <br/>
  <button type="button" ng-click="reset()">
    Reset
  </button>
</div>

Akber Iqbal · Accepted Answer · 2019-05-13 09:48:27Z

0

There could be multiple things... the code below should help, else you can share where you're at:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.output = {
    'product': "",
    'status': ""
  }
  $scope.productChoices = ['product A', 'product B', 'product C', 'product D', 'product E'];
  $scope.statusChoices = ['active', 'pending', 'completed', 'cancelled'];
});

select {
  min-width: 100px;
}

<script src="https://code.angularjs.org/1.1.0/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  Select a product:
  <select style="margin-left:5px;width:60px" id="product" ng-model="output.product" ng-options="prd for prd in productChoices">
  </select>
  <br/> Select a status:
  <select style="margin-left:5px;width:60px" id="status" ng-model="output.status" ng-options="prd for prd in statusChoices">
  </select>

  <hr/> selected product: {{output.product}} <br/> selected status: {{output.status}}<br/>

  <br/>
  <button type="button" ng-click="output = {'product':'', 'status': ''}"> Reset
</button>
</div>

answered May 13, 2019 at 9:48

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

1 Comment

tonyf Over a year ago

I will try what you have suggested here as the way it seems to be working at the moment is keeping the previous values that were selected. Will let you know.

Collectives™ on Stack Overflow

How to reset ng-model variables to Null in AngularJS?

2 Answers 2

The DEMO

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The DEMO

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related