AngularJS中下拉选择器默认值设置与重置实现方法

嗨，我来帮你用AngularJS实现这个下拉选择器的默认值与重置功能～

其实AngularJS的实现思路和jQuery不太一样，它更偏向数据驱动，不用直接操作DOM元素，而是通过绑定数据来控制视图，代码会更清晰易维护。下面给你两种常见场景的实现方案：

场景1：下拉选项通过数组定义（推荐方式） #

这种方式更符合AngularJS的设计思想，方便后续维护和扩展选项：

HTML部分 #

<!-- 引入AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<div ng-app="mySelectApp" ng-controller="SelectCtrl">
  <!-- 用ng-model绑定选中状态，ng-options遍历选项数组 -->
  <select ng-model="currentSelected" ng-options="opt.value as opt.label for opt in selectOptions">
  </select>

  <!-- 重置按钮：点击调用resetDefault函数 -->
  <button ng-click="resetDefault()">重置</button>
</div>

JS控制器部分 #

angular.module('mySelectApp', [])
.controller('SelectCtrl', function($scope) {
  // 定义下拉选项的数据源
  $scope.selectOptions = [
    {value: '0', label: 'first option'},
    {value: '1', label: 'second option'},
    {value: '2', label: 'third option'}
  ];

  // 设置默认选中值
  $scope.defaultValue = '0';
  $scope.currentSelected = $scope.defaultValue;

  // 重置函数：把选中值恢复为默认值
  $scope.resetDefault = function() {
    $scope.currentSelected = $scope.defaultValue;
  };
});

场景2：下拉选项直接写在HTML中（和你原jQuery写法一致） #

如果习惯直接在HTML里写<option>标签，也可以这么实现：

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<div ng-app="mySelectApp" ng-controller="SelectCtrl">
  <select ng-model="currentSelected">
    <option value="0">first option</option>
    <option value="1">second option</option>
    <option value="2">third option</option>
  </select>
  <button ng-click="resetDefault()">重置</button>
</div>

JS控制器部分 #

angular.module('mySelectApp', [])
.controller('SelectCtrl', function($scope) {
  // 初始化默认选中值
  $scope.defaultValue = '0';
  $scope.currentSelected = $scope.defaultValue;

  // 重置逻辑
  $scope.resetDefault = function() {
    $scope.currentSelected = $scope.defaultValue;
  };
});

核心逻辑说明 #

• ng-model="currentSelected"：把下拉框的选中状态和$scope里的变量绑定，数据变化时视图会自动同步，完全不用手动操作DOM。
• 重置按钮通过ng-click触发函数，只需要把绑定的变量改回默认值，下拉框就会自动回到默认选项，这就是AngularJS数据驱动的优势～

内容的提问来源于stack exchange，提问作者Leo Messi