2016-11-08 4 views
0

ドロップダウンに動的に生成されたデータが入力されたときにデフォルト値を選択する簡単な方法はありますか?AngularJsで動的に塗りつぶされたドロップダウンのデフォルト値を設定

時間の値が実際に入力されるドロップダウン(実際は15分ごと:...、09:15、09:30、9:45、10:00、10:15、...)

私がしたいのは、デフォルトでページの読み込み値12:00(正午)に選択することです。

私は値のインデックスを与えることによってこれを行う方法があることを知っていますが、私はそれを行うためにいくつかのよりよい方法があるのか​​探そうと思いましたか?

これはダウン私のドロップです:

<div class="col-md-2" ng-class="{ 'has-error has-feedback': addNewTestSession.sessionStartTime.$touched && addNewTestSession.sessionStartTime.$invalid }"> 
    <label for="sessionStartTime">Session Start Time<span class="mandatory">*</span></label> 
    <select id="sessionStartTime" name="sessionStartTime" class="form-control" 
     ng-model="newTestSessionCtrl.formData.sessionTime" 
     ng-options="time for time in newTestSessionCtrl.viewData.sessionStarTimeIntervals" 
     ng-required="true"> 
     <option value="" disabled selected>Select</option> 
    </select> 
    <span ng-show="addNewTestSession.sessionStartTime.$touched && addNewTestSession.sessionStartTime.$invalid" 
     class="fa fa-warning form-control-feedback" 
     uib-popover="This field is required." 
     popover-trigger="'mouseenter'" 
     popover-placement="auto right" 
     popover-class="additional-info"></span>    
</div> 

そして、この関数はそれのためのデータを生成します。

sessionStarTimeIntervals: this.generateTimeIntervalArray(15) 

generateTimeIntervalArray(minutes) { 
    let retVal = []; 
    let hour = 0; 
    let minute = 0; 
    let whileTest = true; 

    function addZeroIfOneDigitvalue(value) { 
     if ((value + "").length === 1) { 
      value = "0" + value; 
     } 

     return value; 
    } 

    while (whileTest) { 
     if (hour === 24) { 
      break; 
     } 

     retVal.push(addZeroIfOneDigitvalue(hour) + ":" + addZeroIfOneDigitvalue(minute)); 

     minute += minutes; 
     if (minute >= 60) { 
      minute = minute - 60; 
      hour++; 
     } 
    } 

    return retVal; 
} 

すべてのページのロードの12:00を選択するための最良の方法やアプローチがどうなりますか?

答えて

2

選択入力のモデル変数を満たす値を事前に選択することができます。 $スコープのセットアップ中、またはあなたのコードの一部で

newTestSessionCtrl.formDataが満たされている:HTMLで

newTestSessionCtrl.formData.sessionTime='12:00'; 

SELECT

ng-init="newTestSessionCtrl.formData.sessionTime='12:00'" 
ng-model="newTestSessionCtrl.formData.sessionTime" 
関連する問題