3つの選択ボックスの値がAngularjsで選択されているときにラベルを表示

Question

3つのドロップダウンの値が選択されているかどうかを確認する操作を実行する最も簡単な方法は何か、 。

私はこの3つのドロップダウンがあります。

<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> 
<div class="col-md-1"> 
    <label for="timeZone">Time zone</label> 
    <select id="timeZone" name="timeZone" class="form-control" 
     ng-init="newTestSessionCtrl.formData.timeZone = newTestSessionCtrl.viewData.timeZones[15]" 
     ng-model="newTestSessionCtrl.formData.timeZone" 
     ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZones track by timeZone.name"> 
    </select> 
</div> 
<div class="col-md-2" ng-class="{ 'has-error has-feedback': addNewTestSession.sessionCloseTime.$touched && addNewTestSession.sessionCloseTime.$invalid }"> 
    <label for="sessionCloseTime">Session to start within<span class="mandatory">*</span> 
     <i class="fa fa-question-circle" 
      uib-popover="Interviewee must start the Personal Test Session within this time-window counted from the session's start date & time." 
      popover-trigger="'mouseenter'" 
      popover-placement="auto right" 
      popover-class="additional-info"></i> 
    </label> 
    <select id="sessionCloseTime" name="sessionCloseTime" class="form-control" 
     ng-model="newTestSessionCtrl.formData.sessionCloseInterval" 
     ng-options="time.name for time in newTestSessionCtrl.viewData.sessionCloseIntervals" 
     ng-required="true"> 
     <option value="" disabled selected>Select</option> 
     </select> 
</div> 

を私はそれらのすべてが値を選択し、横にただ「こんにちは」と言うラベルを表示するように言わせたとき時にチェックしたいです。

AngularJsでこれをプリフォームするにはどうすればよいですか？

Answer 1

1つの方法は、選択されていることを明示的にチェックすることです。

<span ng-show="newTestSessionCtrl.formData.sessionTime && newTestSessionCtrl.formData.timeZone && newTestSessionCtrl.formData.sessionCloseInterval">Hello</span> 

あなたはこれらの3選択オプションは、フォームに入力するだけであり、唯一の検証はng-requiredで、あなたが持つことができると確信している場合：

<form name="formName"> 
    <span ng-show="!formName.$invalid">Hello</span> 
</form> 

Answer 2

はあなたのスコープ内で関数を作成してみてください/そのようなtrue/falseを返すコントローラ：

newTestSessionCtrl.isAllSelected = function(){ 
    // rules 
    return newTestSessionCtrl.formData.timeZone === 3 && newTestSessionCtrl.formData.sessionCloseInterval === 3 && newTestSessionCtrl.formData.sessionTime === 3; 
} 

関数内に独自のルールを記述します。単なるサンプルです。あなたのHTML内

：

<label ng-show="newTestSessionCtrl.isAllSelected()"> all selected!</label>