角型ドロップダウン選択ボックスのバグ

Question

私は角度のあるフォームで作業しており、バグを解決する必要があります。ここで

は問題です：

1） - 選択タイプ：値-1

2） - [データ-1：すべてのデータ-1

3） - [データ-2：すべてのデータ-2

4） - タイプを値-2（値-1の代わりに）に変更しました。

data-1とdata-2のフィールドは消えます。

5） - タイプを再度値-1に選択します。

もう一度data-1またはdata-2をクリックしてください... の空き領域が再び表示されます。

私はここに、この空きスペースを望んでいない...代わりに

それが再び を選ぶ - - ひとつに戻ってする必要があります...

私はスクリーンショットを添付していますし、コードを見てください。あなたの「タイプ」ドロップダウンの変更イベントで

<form class="addAlert settings_form" ng-submit="createAlert(newAlert)"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 
         aria-hidden="true">×</span></button> 
       <h4 class="modal-title" id="myModalLabel">Create a New Model</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form_fieldset"> 

        <div class="form_item"> 
         <label for="title">Name</label> 
         <input name="title" type="text" class="form-input title" required placeholder="Alert Name" ng-model="newAlert.title"> 
         <div class="error"></div> 
        </div> 


        <div class="form_item"> 
         <label for="alertformat">Type</label> 
         <select class="form-input alertformat" 
           name="alertformat" ng-model="newAlert.alertType" 
           ng-init="newAlert.alertType='Threshold'"> 
          <option value="Threshold" selected>Value-1</option> 
          <option value="Pipeline Failure">Value-2</option> 
         </select> 
        </div> 

        <div class="form_item" ng-if="newAlert.alertType !='Pipeline Failure'"> 
         <label for="alertformat">Data-1 </label> 
         <select class="form-input alertformat" name="alertformat" 
           ng-model="newAlert.site" required> 
          <option value="" disabled>-- Choose one --</option> 
          <option ng-value="-1">All Data-1</option> 
          <option ng-repeat="item in assetsData" ng-value="{{item.sitename}}"> 
           {{item.sitename}} 
          </option> 
         </select> 
        </div> 
        <div class="form_item" ng-show="newAlert.site" ng-if="newAlert.alertType !='Pipeline Failure'"> 
         <label for="alertformat">Data-2</label> 
         <select class="form-input alertformat" name="alertformat" ng-model="newAlert.asset" required> 
          <option value="" disabled>-- Choose one --</option> 
          <option ng-value="-1">All Data-2</option> 
          <option ng-repeat="item in assetsData | filter:newAlert.site" ng-value="{{item.sitename}}"> 
           {{item.name}} 
          </option> 
         </select> 
        </div> 

        <div class="form_item"> 
         <label for="alertformat">Color</label> 
         <div class="severity"> 
         <input type="radio" class="radioBtnClass" name="numbers" value="Red"checked required> 
         <span>Red</span> 
         </input> 

         <input type="radio" class="radioBtnClass" name="numbers" value="Ember"> 
         <span>Blue</span> 
         </input> 
         </div> 
        </div> 

        <div class="form_item"> 


         <label for="users">Users</label> 
         <div class="user_select"> 
           <span ng-repeat="user in userList" style="display:block"> 
           <input class="alert_user_class" value="{{user.pk}}" type="checkbox"> 
           {{user.email}} 
            </input> 
           </span> 
         </div> 


        </div> 

       </div> 
      </div> 

     </form> 

Answer 1

は、オプション値空の文字列（「」）は「1を選択してください」と$scope.newAlert.site = '';と$scope.newAlert.asset = ''を割り当てる必要があります。