Question

已经被问过（和回答过）一千次的问题，但我无法弄清楚这一点。

我正在尝试根据另一个选项框的值更新选择框的选项标签。

选择新标签来源的代码：

<select id="year" name="year" ng-model="Data.year" ng-change="updateAge(Data.year)">

新标签目标的选项值代码

<option value="low">{{ Age.low }}</option>

更新范围变量的控制器代码。第二个控制台日志显示更新的年龄，但视图中未显示。我已经尝试$scope.$apply()但是Angular错误，因为$ apply已经在进行中。

$scope.updateAge = function( year ) {
    if ( year == '2016' ) {
        console.log($scope.Age.low);
        $scope.Age.low = 'NEW AGE';
        console.log($scope.Age.low);
    }   
}

Answer 1

一些观察结果：

将选项值设置为“低”时。因此，在updateAge函数调用中，此块if ( year == '2016' ) { ... }将不会执行，因为year值始终为low。
使option值也是动态的。

尝试 <option value="{{ Age.low }}">{{ Age.low }}</option>

而不是 <option value="low">{{ Age.low }}</option>

<强>样本

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.Age = {"low": '2016'};
    $scope.updateAge = function(year) {
    if (year == '2016') {
        console.log($scope.Age.low);
        $scope.Age.low = 'NEW AGE';
        console.log($scope.Age.low);
    }   
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select id="year" name="year" ng-model="Data.year" ng-change="updateAge(Data.year)">
  <option value="{{ Age.low }}">{{ Age.low }}</option>
  </select>
</div>

AngularJS变量未在视图中更新

1 个答案: