Angular选择已选中值时ng-change不触发，求替代事件方案

这个问题我之前也碰到过！Angular的ng-change确实只会在模型值真正发生变化的时候触发，所以当你重复选择已经选中的选项时，因为模型没更新，事件自然不会跑。不过有几种方法可以解决这个问题，我给你详细说说：

方法1：自定义指令监听Option点击（最推荐） #

这种方法最精准，能直接捕获到用户点击任意选项（包括已选中的）的事件，不会受下拉框展开/收起的干扰。

完整代码示例 #

HTML部分：

<div ng-controller="MyCtrl">
  <select ng-model="selectedSize" on-option-click>
    <option ng-repeat="size in sizes" value="{{size.code}}">{{size.name}}</option>
  </select>
</div>

JS部分：

var myApp = angular.module('myApp',[]);

// 自定义指令：监听option的点击事件
myApp.directive('onOptionClick', function() {
  return {
    link: function(scope, element) {
      // 给每个option绑定点击事件
      element.find('option').on('click', function() {
        var selectedValue = angular.element(this).val();
        // 用$apply让Angular感知到变化并执行scope方法
        scope.$apply(function() {
          scope.update(selectedValue);
        });
      });
    }
  };
});

function MyCtrl($scope) {
    $scope.sizes = [
        {code: 1, name: 'n1'},
        {code: 2, name: 'n2'}
    ];
    $scope.selectedSize = 1; // 默认选中第一个选项
    $scope.update = function(selectedVal) {
        // 获取当前选中值（如果没有传参就用scope里的模型值）
        var currentValue = selectedVal || $scope.selectedSize;
        console.log('当前选中值:', currentValue);
        // 这里添加你的业务逻辑
    }
}

原理说明 #

自定义指令onOptionClick会在select元素渲染完成后，给每个option标签绑定原生点击事件。当用户点击任何选项时，都会触发update方法，并把选中的值传进去，同时通过$apply同步Angular的作用域，确保逻辑能正常执行。

方法2：给Select添加ng-click（简单但有小瑕疵） #

如果你的需求比较简单，也可以直接给select标签加ng-click事件，点击下拉框时检查当前选中值：

代码示例 #

HTML部分：

<div ng-controller="MyCtrl">
  <select ng-model="selectedSize" ng-click="checkSelected()">
    <option ng-repeat="size in sizes" value="{{size.code}}">{{size.name}}</option>
  </select>
</div>

JS部分：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.sizes = [
        {code: 1, name: 'n1'},
        {code: 2, name: 'n2'}
    ];
    $scope.selectedSize = 1;
    $scope.checkSelected = function() {
        // 加个延迟确保是选中后的状态（因为点击下拉框展开时也会触发ng-click）
        setTimeout(function() {
            $scope.$apply(function() {
                console.log('当前选中值:', $scope.selectedSize);
                // 执行你的业务逻辑
            });
        }, 0);
    }
}

注意事项 #

这种方法的小瑕疵是：点击下拉框展开列表时也会触发ng-click，所以需要加个setTimeout延迟，确保我们获取到的是用户最终选中的值。如果对精度要求不高，这个方法足够简单好用。

内容的提问来源于stack exchange，提问作者Evgeniy Borinskikh