AngularJS中HTML SELECT的ng-change函数内$scope.ptoItem未定义问题

我之前也碰到过一模一样的问题，明明页面上{{ ptoItem.classname }}能正常显示选中值，但ng-change触发时函数里的$scope.ptoItem却拿不到值，这大概率是AngularJS作用域更新时机或者原型继承的小坑导致的，给你两个靠谱的解决办法：

方法1：直接在ng-change中传递选中的模型 #

这是最直接且不容易踩坑的方式，不用依赖$scope的同步，把当前选中的ptoItem作为参数传给函数就行：

修改后的HTML代码： #

<select ng-options="ptoGroup as ptoGroup.classname for ptoGroup in ptoGroupTypes" 
        ng-model="ptoItem" 
        ng-change="ptoUpdateUserQueryForm(ptoItem)"></select>

修改后的控制器函数： #

$scope.ptoUpdateUserQueryForm = function(selectedItem) {
  // 直接用传入的参数，完全不用依赖$scope的同步
  console.log("选中的类型：", selectedItem.classname);
};

这种方式绕开了作用域同步的潜在问题，参数就是当前最新选中的对象，肯定能拿到有效值。

方法2：初始化模型+用"点语法"规避作用域继承问题 #

如果页面后续可能出现隐式子作用域（比如嵌套ng-if、ng-repeat这类会创建子作用域的指令），直接绑定$scope.ptoItem容易因为原型继承导致更新不同步。建议把模型放在一个父对象里，同时初始化默认值：

修改后的控制器代码： #

cduApp.controller('cdu_controller', function ($scope, $http) {
  $scope.ptoGroupTypes = [
    { "classname": "Team" },
    { "classname": "Organization" }
  ];
  // 初始化一个表单数据容器，把ptoItem放在里面
  $scope.formData = {
    ptoItem: $scope.ptoGroupTypes[0] // 默认选中第一个选项
  };
  
  $scope.ptoUpdateUserQueryForm = function() {
    // 通过父对象访问ptoItem，就不会有undefined的问题了
    console.log("选中的类型：", $scope.formData.ptoItem.classname);
  };
});

修改后的HTML代码： #

<select ng-options="ptoGroup as ptoGroup.classname for ptoGroup in ptoGroupTypes" 
        ng-model="formData.ptoItem" 
        ng-change="ptoUpdateUserQueryForm()"></select>
<!-- 页面显示也要对应修改 -->
<td>{{ formData.ptoItem.classname }}</td>

为什么你的代码会出现这个问题？ #

页面能显示{{ ptoItem.classname }}是因为AngularJS的双向绑定最终会完成同步，但ng-change触发时，可能因为作用域原型链的延迟，当前函数访问的$scope.ptoItem还没完成更新（这种情况虽然不常见，但确实存在）。上面两种方法都能完美规避这个问题。

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