Angular JS - 使用函数重置下拉菜单

JS

使用Angular JS的一个常见需求是重置下拉菜单。当用户选择了一个选项后，有时候我们希望能够通过一个按钮或者其他事件来重置下拉菜单的选择，使其回到默认状态。本文将介绍如何使用函数来实现下拉菜单的重置，并提供一个案例代码来演示。

案例代码：

html
<!DOCTYPE html>
<html ng-app="resetDropdownApp">
<head>
    <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
    <script>
        angular.module('resetDropdownApp', [])
            .controller('ResetDropdownController', function($scope) {
                $scope.dropdownOptions = [
                    {id: 1, name: 'Option 1'},
                    {id: 2, name: 'Option 2'},
                    {id: 3, name: 'Option 3'}
                ];
                $scope.selectedOption = null;
                $scope.resetDropdown = function() {
                    $scope.selectedOption = null;
                };
            });
    </script>
</head>
<body>
    <div ng-controller="ResetDropdownController">
        <select ng-model="selectedOption" ng-options="option.name for option in dropdownOptions">
            <option value="">-- Select an option --</option>
        </select>
        <button ng-click="resetDropdown()">Reset Dropdown</button>
    </div>
</body>
</html>

在上面的案例代码中，我们创建了一个Angular JS应用，并定义了一个控制器ResetDropdownController。控制器中包含了一个下拉菜单的选项数组dropdownOptions，以及一个用于存储当前选择的选项的变量selectedOption。

在HTML中，我们使用ng-controller指令将控制器应用在一个