如何实现AngularJS点击按钮将下拉选择器重置为值1

嘿，这事儿其实超简单，咱们一步步来搞定它！

首先得回忆下AngularJS的双向数据绑定特性：你的下拉框用ng-model绑定了一个变量，只要这个变量的值变了，下拉框的选中状态就会自动跟着更新。所以核心逻辑就是——点击按钮时把绑定的变量值设为"1"就行。

分两种场景实现（看你用的绑定方式） #

场景1：ng-model绑定到$scope变量

如果你的模板里是ng-model="type"，那对应的控制器代码要这么写：

// 假设你的控制器是这样定义的
angular.module('yourApp').controller('YourCtrl', function($scope) {
  // 初始化默认选中第一个选项
  $scope.type = "1";

  // 实现按钮调用的doSomething方法
  this.doSomething = function() {
    // 重置type的值为"1"
    $scope.type = "1";
  };
});

场景2：用controllerAs语法（ng-model="$ctrl.type"）

如果你的模板里是ng-model="$ctrl.type"（把变量挂在控制器实例上），那控制器代码要改成这样：

angular.module('yourApp').controller('YourCtrl', function() {
  var vm = this;
  // 初始化默认选中第一个选项
  vm.type = "1";

  vm.doSomething = function() {
    // 重置到value=1的选项
    vm.type = "1";
  };
});

额外小技巧：快速实现（不用写控制器方法） #

要是你只是单纯想重置，不想额外写函数，也可以直接在按钮上用ng-click直接赋值：

<div class="btn action-btn" ng-click="$ctrl.type = '1'"> Reset </div>

不过既然你已经指定要调用$ctrl.doSomething()，还是推荐前面控制器实现的方式，后续要加其他逻辑（比如重置后提示、接口请求）也更方便扩展。

为什么这样能生效？ #

AngularJS会自动监听ng-model绑定变量的变化，一旦变量变成"1"，下拉框就会自动匹配value="1"的<option>并选中它，完全不需要手动操作DOM~

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