我有这样的代码：

<select ng-model="home.modal.topicId"
        ng-change="ctrl.modalTopicChanged()"
        ng-options="item.id as item.name for item in home.modal.option.topics.data"
        ng-required="true">
        <optionhttps://www.jb51.cc/tag/dis/" target="_blank">display: none;" value="">Select Topic</option>
</select>

在rc1之前,首次显示表单时未触发ng-change.现在它被一个未定义的home.modal.topicId解雇了.这对我来说是一个突破性的变化,但它没有在突破性变化部分提及,我想知道它是否是一个尚未被注意到的错误.

这是生成的堆栈跟踪：

TypeError: Cannot read property 'dataMap' of undefined
    at AdminProblemController.modalTopicChanged (http://127.0.0.1:17315/Content/app/admin/controllers/ProblemController.js:109:114)
    at $parseFunctionCall (http://127.0.0.1:17315/Scripts/angular.js:11387:18)
    at Scope.$get.Scope.$eval (http://127.0.0.1:17315/Scripts/angular.js:13276:28)
    at http://127.0.0.1:17315/Scripts/angular.js:19888:13
    at http://127.0.0.1:17315/Scripts/angular.js:19499:9
    at forEach (http://127.0.0.1:17315/Scripts/angular.js:331:20)
    at $$writeModelToScope (http://127.0.0.1:17315/Scripts/angular.js:19497:5)
    at writetoModelIfNeeded (http://127.0.0.1:17315/Scripts/angular.js:19490:14)
    at http://127.0.0.1:17315/Scripts/angular.js:19484:9
    at validationDone (http://127.0.0.1:17315/Scripts/angular.js:19420:9)

我在这里注意到的是一个新函数：writetoModelIfNeeded

当我查看更改日志差异时,在检查所有更改和行号时,我找不到提及此功能的任何内容.

我想就此提出一些建议.首先是可以找到导致添加writetoModelIfNeeded的更改,其次是选择框的正确功能.我认为整个想法是只有在定义模型值时才会触发ng-change.

这里参考的是新代码的区域,似乎已经添加了1.3.0 rc.1

**
   * @ngdoc method
   * @name ngModel.NgModelController#$commitViewValue
   *
   * @description
   * Commit a pending update to the `$modelValue`.
   *
   * Updates may be pending by a debounced event or because the input is waiting for a some future
   * event defined in `ng-model-options`. this method is rarely needed as `NgModelController`
   * usually handles calling this in response to input events.
   */
  this.$commitViewValue = function() {
    var viewValue = ctrl.$viewValue;

    $timeout.cancel(pendingDebounce);

    // If the view value has not changed then we should just exit,except in the case where there is
    // a native validator on the element. In this case the validation state may have changed even though
    // the viewValue has stayed empty.
    if (ctrl.$$lastCommittedViewValue === viewValue && (viewValue !== '' || !ctrl.$$hasNativeValidators)) {
      return;
    }
    ctrl.$$lastCommittedViewValue = viewValue;

    // change to dirty
    if (ctrl.$pristine) {
      ctrl.$dirty = true;
      ctrl.$pristine = false;
      $animate.removeClass($element,PRISTINE_CLASS);
      $animate.addClass($element,DIRTY_CLASS);
      parentForm.$setDirty();
    }
    this.$$parseAndValidate();
  };

  this.$$parseAndValidate = function() {
    var parserValid = true,viewValue = ctrl.$$lastCommittedViewValue,modelValue = viewValue;
    for(var i = 0; i < ctrl.$parsers.length; i++) {
      modelValue = ctrl.$parsers[i](modelValue);
      if (isUndefined(modelValue)) {
        parserValid = false;
        break;
      }
    }
    if (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
      // ctrl.$modelValue has not been touched yet...
      ctrl.$modelValue = ngModelGet();
    }
    var prevModelValue = ctrl.$modelValue;
    var allowInvalid = ctrl.$options && ctrl.$options.allowInvalid;
    if (allowInvalid) {
      ctrl.$modelValue = modelValue;
      writetoModelIfNeeded();
    }
    ctrl.$$runValidators(parserValid,modelValue,viewValue,function() {
      if (!allowInvalid) {
        ctrl.$modelValue = ctrl.$valid ? modelValue : undefined;
        writetoModelIfNeeded();
      }
    });

    function writetoModelIfNeeded() {
      if (ctrl.$modelValue !== prevModelValue) {
        ctrl.$$writeModelToScope();
      }
    }
  };

  this.$$writeModelToScope = function() {
    ngModelSet(ctrl.$modelValue);
    forEach(ctrl.$viewchangelisteners,function(listener) {
      try {
        listener();
      } catch(e) {
        $exceptionHandler(e);
      }
    });
  };

this.modal = {
      topicId:null,option:{
        topics:{
          data:[{id:1,name:'item1'},{id:2,name:'item2'}]
        }
      }
    };

这里发生的是angular表示null是一个无效值,因此默认情况下将其设置为undefined.您可以通过将其设置为“未定义”或将其添加到您的html来解决此问题：

ng-model-options="{allowInvalid:true}"

还测试了Josep plunker并将该值更改为null也导致ngChange触发

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
 <p>在输入框中输入一些信息:</p>
 <input type="text" ng-change="myFunc()" ng-model="myValue" />
 <p>输入框已经修改了 {{count}} 次。</p>
</div>

<script>
 angular.module(''myApp'', [])
  .controller(''myCtrl'', [''$scope'', function($scope) {
   $scope.count = 0;
   $scope.myFunc = function() {
    $scope.count++;
   };
  }]);
</script>
</body>
</html>

• 详解Angular系列之变化检测(Change Detection)
• 解决angularJS中input标签的ng-change事件无效问题
• angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
• AngularJs ng-change事件/指令的用法小结
• Angular 的 Change Detection机制实现详解

<element ng-change="expression"></element>

<body ng-app="myApp">

<div ng-controller="myCtrl">
 <input type="text" ng-change="myFunc()" ng-model="myValue" />
 <p>The input field has changed {{count}} times.</p>
</div>

<script>
angular.module(''myApp'', [])
.controller(''myCtrl'', [''$scope'', function($scope) {
 $scope.count = 0;
 $scope.myFunc = function() {
  $scope.count++;
 };
}]);
</script>

</body>

<h3>Radio 控件测试</h3> 
<p><label> 
  <input type="radio" value="男" name="sex" ng-model="value1" ng-change="radioChecked()" /> 
  男 
 </label> 
 <label> 
  <input type="radio" value="女" name="sex" ng-model="value1" ng-change="radioChecked()" /> 
  女 
 </label></p> 
<h3>checked 控件测试</h3> 
<p><div> 
  <label> 
   <input name="agree" type="checkbox" value="同意" ng-model="value2" ng-change="checkboxClick()" /> 
   同意协议 
  </label> 
 </div> 
 <div> 
  <label> 
   <input name="agree" type="checkbox" value="同意2" ng-model="value2" ng-change="checkboxClick()" /> 
   同意协议2 
  </label> 
 </div></p> 

var app = angular.module(''myApp'', []); 
app.controller(''validateCtrl'', function ($scope) { 
 //randio ng-change事件和原始onchange相同 
 //radio ng-model 的值是value 
 $scope.radioChecked = function () { 
  console.info($scope.value1); 
 } 
 //checkbox ng-change事件和原始onchange相同 
 //checkbox ng-model总是是true或false 
 $scope.checkboxClick = function () { 
  console.info($scope.value2); 
 } 
}); 

<form> 
 <div> 
  <label>姓名：</label> 
  <input type="text"ng-model="name" ng-change="txtChange();" /> 
 </div> 
 <div> 
  <label>选择年级：</label> 
  <selectng-change="selectChange();" ng-model="grade"> 
   <option value="1">一年级</option> 
   <option value="2">二年级</option> 
  </select> 
 </div> 
</form> 

var app = angular.module(''myApp'', []); 
app.controller(''validateCtrl'', function ($scope) { 
 //textbox 的ng-change事件和原始ng-change不相同，而是和$scope.$watch()监听相同 
 //textbox 的ng-model为当前输入框的内容，为value值 
 $scope.txtChange = function () { 
  console.info($scope.name); 
 } 
 //select 的ng-change事件和原始ng-change相同 
 //ng-model 的默认情况下ng-model的结果为value值 
 $scope.selectChange = function () { 
  console.info($scope.grade); 
 } 
}); 

• 详解Angular系列之变化检测(Change Detection)
• 解决angularJS中input标签的ng-change事件无效问题
• angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
• AngularJS ng-change 指令的详解及简单实例
• Angular 的 Change Detection机制实现详解