AngularJS変数がビューで更新されない

Question

何千回も質問されている質問ですが、これを把握することはできません。

私は別の値に基づいて選択ボックスのオプションラベルを更新しようとしています。新しいラベルのソースの

選択コード：スコープ変数を更新するための新しいラベル

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

コントローラー・コードの目標のために

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

オプションの値コード。 2番目のコンソールログには更新された年齢が表示されますが、ビューには表示されません。私は$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); 
    } 
} 

Answer 1

いくつかの観察：あなたは "低" などのオプションの値を設定したよう

• 。したがって、updateAge関数呼び出しでは、の値は常にlowになるため、このブロックif (year == '2016') { ... }は実行されません。

• 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>