Сброс к несвязанной опции в выпадающем меню

Question

У меня есть выпадающее меню в формате HTML, как показано ниже, с опцией по умолчанию. Я использую ng-options, чтобы сгенерировать оставшиеся опции, привязывая их, а не первыми с переменной 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> 

Результаты в следующей 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> 

мне нужно поддерживать кнопку сброса, который должен сбросить ниспадающее до опции по умолчанию «Выберите элемент». Поскольку этот параметр не привязан к модели. я не могу сделать что-то вроде этого -

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

или даже

$scope.dropdown = null 

Как я могу сбросить выпадающее меню к первому варианту?

Answer 1

попробуйте вот так.

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>