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).

score 1 · Accepted Answer · answered May 13 '19 at 14:16

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>

score 0 · Answer 2 · answered May 13 '19 at 09:48

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>

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. — tonyf, May 13 '19 at 13:38

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

2 Answers2

The DEMO