javascript - 所选选项更改时模型未更新

Question

我的 Angular.js 项目有一个绑定(bind)到模型的选择元素。在加载时选择了适当的选项，但是选择另一个选项似乎不会更新模型，至少不会永久更新。如果我以编程方式更改模型，但结果如预期的那样。

Controller :

angular.module('myApp.controllers').controller('HomeCtrl',function($scope){
  $scope.month = "08"; // this default value is selected on-load as expected
  $scope.updateMonth = function() {
   console.log($scope.month); // this shows the original value not the newly selected value
   // a http request and other things happen here...
  };
  $scope.logMonth = function(month) {
   console.log(month); // this shows the newly selected value as expected
  }
 });

模板:

<select ng-model="month" ng-change="logMonth(month);">
 <option value="07">07</option>
 <option value="08">08</option>
 <option value="09">09</option>
</select>
<button ng-click="updateMonth();">Update Month</button>

Answer 1

听起来像是 Angular 范围界定问题。范围继承适用于范围内的对象，但不适用于基元。尝试更改 $scope.month = "08"至 $scope.month = {selected: "08"} .然后在您的 Controller 中，将 html 更改为以下内容。

<select ng-model="month.selected" ng-change="logMonth(month.selected);">