AngularJS選択項目が最初/デフォルト値にリセットされていません

Question

私の知恵が終わりです！私はコントローラとビューを持っている角度で。 ページに2回のドロップダウンがあり、再起動ボタンをクリックするとデフォルトにリセットする必要があります。

コントローラ内のコレクションに「選択」オプションを押して、ボックスの値をレンダリングするときに値を設定できます。ただし、init（）メソッドを再度実行するリセットボタンを押すと、ドロップダウンを最初の値に戻す必要があります。これは発生しません。$ scope.selectedYearと$ scope.selectedReportの値は、リセットボタンが押される前と同じです。

これはコントローラ

function TreeReportsCHLController($scope, $q, $routeParams, reportsDashboardResource, navigationService, notificationsService, dialogService, entriesManageDashboardResource, $timeout) { 

    // Methods 


    var generalError = function() { 
     notificationsService.error("Ooops", "There was an error fetching the data"); 
     $scope.actionInProgress = false; 
    } 

    // Scope 
    $scope.selectedYear = ""; 


    $scope.init = function() { 

     $scope.hasCompleted = false; 
     $scope.actionInProgress = false; 
     $scope.yearSelected = false; 
     $scope.reportTypes = ["Choose", "Entered", "ShortListed", "Winner", "Recieved"]; 
     $scope.selectedReport = ""; 
     $scope.entryYears = new Array(); 
     $scope.entryYears.push("Choose a Year"); 
     entriesManageDashboardResource.getEntryYears().then(function (response) { 
      angular.forEach(response, function (value, key) { 
       $scope.entryYears.push(value); 
      }); 
     }); 

     $scope.selectedYear = $scope.entryYears[0]; 
      $scope.selectedReport = $scope.reportTypes[0]; 


    }; 

    $scope.yearHasSelected = function(selectedYear) { 
     $scope.yearSelected = true; 
     $scope.selectedYear = selectedYear; 
    }; 


    $scope.generateFile = function (selectedReport) { 
     $scope.actionInProgress = true; 
     var reportDetail = { 
      entryYear: $scope.selectedYear, 
      chosenEntryStatus: selectedReport 
     }; 

     reportsDashboardResource.generateEntriesReportDownloadLink(reportDetail).then(function (response) { 
      if (response.Successful) { 
       $scope.hasCompleted = true; 
      } else { 
       notificationsService.error("Ooops", response.ErrorMessage); 
      } 
      $scope.actionInProgress = false; 
     }, generalError); 
    }; 

    $scope.restart = function() { 
     $scope.init(); 
    } 



    // Initialise Page 

    $scope.init(); 

} 

angular.module("umbraco").controller("ReportsDashboardController", TreeReportsCHLController) 

これはその中にドロップダウンを持つコードであるための完全なコードです。

<table> 
    <tr> 
     <td>Get a report for year: {{selectedYear}}</td> 
     <td><select ng-model="selectedYear" ng-change="yearHasSelected(selectedYear)" ng-options="year for year in entryYears" no-dirty-check></select></td> 
    </tr> 
    <tr ng-show="!hasCompleted && yearSelected"> 
     <td> 
      Get Report Type: 
     </td> 
     <td> 
      <select ng-model="selectedReport" ng-change="generateFile(selectedReport)" ng-options="status for status in reportTypes" no-dirty-check ng-disabled="actionInProgress"></select> 
     </td> 
    </tr> 
</table> 

はまた、私は単にscope.entryYears [0]内のリセット方法$に$ scope.selectedYearを設定し、さらにテストを行ってきました。ここでconsole.log $ scope.selectedYearを指定すると値が変更されていることが確認されますが、$ scope.selectedYear/{{selectedYear}}をテスト用ページに出力したところでは変わっていますが、これは更新されません。コントローラーとビューとの間のバインディングが発生していない場合とほぼ同じです。

助けが必要ですか？

ありがとうございました。

Answer 1

私はあなたのコントローラに注入しているサービスへのアクセス権がないので、ここでは動作しているplunkです。 Iは、コントローラで行われた変更は、次のとおり

まず、

$scope.entryYears = new Array(); 

これはJSの配列を宣言するための好ましい方法であるとして

$scope.entryYears = []; 

なります。

第二に、私は、これは無限のダイジェストサイクルを引き起こしたとして

$scope.selectedYear = $scope.entryYears[0]; 
$scope.selectedReport = $scope.reportTypes[0]; 

をラップしている）（scope.apply $を削除しました。