CODEWITHSUNDEEP
javascripthtmlangularjshtml-select
Ankit Rustagi
Ankit Rustagi

Reputation: 5637

Reset to unbound option in dropdown menu

I have a dropdown menu in HTML as below, with a default option. I am using ng-options to generate the remaining options thus binding these and not the first with the variable dropdown.

<td>
    <select ng-model="dropdown" ng-options="item as item.name for item in items">
        <option value="">--- Select an item---</option>  <!-- default -->
    </select>                                   
</td>

Results in to the following HTML

<td>
    <select ng-model="dropdown" ng-options="item as item.name for item in items">
        <option value="">--- Select an item---</option> 
        <option value="0" label="item1">item1</option>
        <option value="1" label="item2">item2</option>
        <option value="2" label="item3">item3</option>
    </select>                                   
</td>

I need to support a reset button, which should reset the drop down to the default option "Select an item". Since this option is not bound to the model. i cant do something like this - 

$scope.dropdown = items[0] // this would select item1

or even

$scope.dropdown = null

How can i reset my dropdown to the first option ?

Upvotes: 0

Views: 211

Answers (1)

Hadi
Hadi

Reputation: 17289

try like this.

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
   $scope.items = [{name:"ali"},{name:"reza"}];
  
  $scope.dropdown = $scope.items[0];
  $scope.reset = function(){
    $scope.dropdown = {};
    }
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   
  <select ng-model="dropdown" ng-options="item as item.name for item in items">
        <option value="">--- Select an item---</option> 
       
    </select>  
  <button type="submit" name="button" ng-click="reset()">Reset</button>
  
</div>

Upvotes: 1

Related Questions