アンギュラマテリアルmd-selectアイテムがウィンドウリロード時に保存されない

Question

ユーザがタスクの進捗状況を選択する場所からドロップダウンリストがあります。進捗状況は常に入力されるため、空白にすることはできません。問題は、コントローラがサービスから進捗情報を取得して設定することができないことです。 md-selectドロップダウンリストに最初の進捗状況を入力し、新しいステータスを取得/設定することの背後にあるロジックを理解するのが難しいことは認めます。私はAngular Materialサイトのmd-selectディレクティブを見ましたが、md-on-openとmd-on-closeについては、初期値/デフォルト値ではなく明確なガイドラインを示しています。だからここ は私のテンプレートの私のMD-セレクトコードです：それは、ツールバーに含まれている

<md-toolbar style="background-color: #e6e3f4"> 
    <div style="display: flex; flex-direction: row"> 
     <span flex></span> 
     <md-input-container style="margin: 1px;" ng-controller="SelectOptGroupController"> 
      <md-select ng-model="progress"> 
       <md-option ng-repeat="progress in progresses" value="{{progress}}">{{progress}}</md-option> 
      </md-select> 
     </md-input-container> 
    </div> 
    </md-toolbar> 

それは何の違いかを行う場合、私は知りません。

angular 
.module('myApp') 
.controller('SelectOptGroupController', ['$scope', '$mdDialog', '$stateParams', 'ScorecardStatus', function($scope, $mdDialog, $stateParams, ScorecardStatus) { 
$scope.employee.id = $stateParams.employeeid; 
$scope.employee.startDate = $stateParams.startdate; 
$scope.employee.endDate = $stateParams.enddate; 

    $scope.progresses = [ 
     "Not started", 
     "In progress", 
     "Quality analysis finished", 
     "Sent for review", 
     "Completed" 
    ]; 


    $scope.getSelectedProgress = function(progress){ 
     getProgress().then(function(progress){ 
      $scope.progress = progress; 
     }) 
    } 
    //console.log($scope.progress); 

}]）

をそしてここに、データベースからの呼び出しを行うサービスです：

コントローラは、このようになります

angular 
    .module('myApp') 
    .factory('ScorecardStatus', function($http,$rootScope,$q){ 
     var progress; 

     function setProgress() { 
       $http({ 
        method: 'POST', 
        url: 'php/setScorecardProgress.php', 
        data: {status: selectedStatus, id: employee.id, startdate: employee.startDate, enddate: employee.endDate} 
      }); 
     } 

     function getProgress() { 
      if (!progress) 
       $http({ 
        method: 'GET', 
        url: 'php/getScorecardProgress.php' 
      }); 

      return progress; 
     } 

     return { 
      getProgress: getProgress 
     } 

}); 

ありがとう！

Answer 1

md-selectで使用しているprogressごとにidを定義してください。私の例で示したように、idはそれぞれprogressに固有であるため、進捗状況はidで識別できます。ページが読み込まれるときに選択したいidのprogressモデルを定義してください。ここJS

.controller('TempController', function($scope) { 
$scope.progress = 2; 
$scope.progresses = [ 
    { 
    name: "Not started", 
    id: 0 
    }, 
    { 
    name: "In progress", 
    id: 1 
    }, 
    { 
    name: "Quality analysis finished", 
    id: 2 
    }, 
    { 
    name: "Sent for review", 
    id: 3 
    }, 
    { 
    name: "Completed", 
    id: 4 
    } 
]; 
}); 

<md-toolbar> 
    <div layout="row" layout-aling="end center"> 
    <span flex></span> 
    <md-input-container> 
     <md-select ng-model="progress"> 
     <md-option ng-repeat="progress in progresses" value="{{progress.id}}">{{progress.name}}</md-option> 
     </md-select> 
    </md-input-container> 
    </div> 
</md-toolbar> 

はwokring例です。 http://codepen.io/next1/pen/zBNRMe