在下拉菜單中重置爲未綁定選項

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>