AngularJS变量没有在视图中更新

一个已被问及（并回答）了一千次的问题，但我无法弄清楚。AngularJS变量没有在视图中更新

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

为新标签的源选择的代码：为新的标签

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

控制器代码的目标来更新范围可变

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

选项值的代码。第二个控制台日志显示更新的时间，但未在视图中显示。我试过$scope.$apply()，但因为$ apply已经在进行中，所以出现了角度错误。

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

来源

2017-04-12 Ian

为什么不在新标签中显示'''Data.year'''而不是''Age.low'''？ – yarwest

刚更新updateAge函数。我试图在第一个选择框中根据年份更改年龄。 – Ian

我开始越来越了解你的目标。您想要显示选定的年份，但仅限于2016年？你能再次清楚地解释一下吗？ – yarwest

一些观察：

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

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

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

DEMO

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>

来源

2017-04-13 09:48:14

AngularJS变量没有在视图中更新

回答

相关问题