Set default value of a dropdown and reset it in AngularJS

Question

So there is a dropdown selector which must be set on the default option and be able to reset to it if reset button is clicked.

I managed to do it with jQuery, I'm wondering how can it be done using AngularJS

$('#buttonID').click(function(){
    $('#selectId').val('0');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectId">
    <option value="0">first option</option>
    <option value="1">second option</option>
    <option value="2">third option</option>
</select>
<input type="button" id="buttonID" value="reset"/>

Any suggestions?

Possible duplicate of Setting default value in select drop-down using Angularjs — 4b0
– 4b0, Commented Apr 17, 2018 at 11:55

31piy · Accepted Answer · 2018-04-17 11:58:24Z

0

You need to have a collection of options and a model bound to the select box. On reset, you just need to change the value of bound model to what you want:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.opt = 0;
    $scope.options = [{
      value: 0,
      label: 'first option'
    }, {
      value: 1,
      label: 'second option'
    }, {
      value: 2,
      label: 'third option'
    }];
    
    $scope.reset = function() {
      $scope.opt = 0;
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select id="selectId" ng-options="opt.value as opt.label for opt in options" ng-model="opt">
</select>
  <input type="button" id="buttonID" value="reset" ng-click="reset()"/>
</div>

answered Apr 17, 2018 at 11:58

31piy

23.9k6 gold badges51 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Set default value of a dropdown and reset it in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related