AngularJsで3つのドロップダウンが選択されていない場合はラベルを非表示にします

Question

私は簡単なことをしようとしています。しかし、私は非常に角度があり、主にバックエンドの技術経験を持っているので、私は自分自身を助けることはできませんが、条件が他のプログラミング言語と比較してAngularで異なるかどうかは疑問です。私がやろうとしています何

は次のとおりです。

• 私は3つのドロップダウン、そして隠されたラベルを持っています。ドロップダウンの3つすべてが値を選択した場合は、単にラベルを表示したいだけです。コントロールの

  コード：

  私は、ユーザーがいくつかの変更を行う際に、機能がトリガされるたびに、NG-変更を入れている選択要素にどのような私が今までコーディングされていることである

。私は、関数の結果に応じて、真または偽となりNG-ショープロパティを入れているラベルに

<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" 
     ng-change="newTestSessionCtrl.checkIfAllValuesAreSelected()"> 
     <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" 
     ng-change="newTestSessionCtrl.checkIfAllValuesAreSelected()"> 
    </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" 
     ng-change="newTestSessionCtrl.checkIfAllValuesAreSelected()"> 
     <option value="" disabled selected>Select</option> 
    </select> 
    <span ng-show="addNewTestSession.sessionCloseTime.$touched && addNewTestSession.sessionCloseTime.$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-2"> 
    <lable ng-show="newTestSessionCtrl.checkIfAllValuesAreSelected()">Your local time</lable> 
    <div>{{date | date:'yyyy-MM-dd hh:mm'}}</div> 
</div> 

角度の機能は次のようになります。

2つは非常に簡単で、簡単な関数：isUndefinedOrNullは、ドロップダウンの値が何らかのオブジェクトであるか、またはnullか未定義かをチェックし、ブール値を返します。

checkIfAllValuesAreSelected（）は、3つのドロップダウンすべてに対してisUndefinedOrNull関数を呼び出し、すべての値がtrueの場合にのみtrueを返します。そうでない場合はfalseになります。

isUndefinedOrNull(val) { 
     return angular.isUndefined(val) || val === null; 
    } 

    checkIfAllValuesAreSelected() { 
     if (this.isUndefinedOrNull(this.formData.sessionCloseInterval) && this.isUndefinedOrNull(this.formData.timeZone) 
      && this.isUndefinedOrNull(this.formData.sessionTime)) { 
      return false; 
     } 
     else{ 
      return true; 
     } 
    } 

何が結果です：ラベルは常に表示され、そして私はクローム機能でデバッグモードを使用していたときに何度も再訪しています。私はそれが部分、チェック最初の値、それがnullでない場合に来ると感じているオブジェクトがtrueを返す、それはそれがnullであることを確認するよりもfalseを返しますが、それはとにかく3番目の値をチェックします。だから、私は一種の迷子だ。 誰かが私が間違ってやっていることを見ていて、はっきりとわかりませんか？

Answer 1

まず、checkIfAllValuesAreSelected()はまったく必要ありません。あなたは、単にこれにラベルを変更することができます。

<div class="col-md-2"> 
    <label ng-show="newTestSessionCtrl.formData.sessionTime && newTestSessionCtrl.formData.timeZone && newTestSessionCtrl.formData.sessionCloseInterval">Your local time</label> 
    <div>{{date | date:'yyyy-MM-dd hh:mm'}}</div> 
</div> 

次に、あなたのコントローラから機能を削除し、ng-change属性を削除し、すべて設定する必要があります。 Angularは、ng-modelバインディングのために、3つの値のいずれかが変更されると、ラベルの表示を自動的に更新します。