非表示と表示Angular Jsの条件に基づくファイルアップロードコントロール

Question

Angular Jsを使用しています。 "Include Image"という名前のチェックボックスがあり、これはデフォルトでチェックされています。私はファイルアップロードコントロールを持っており、どのユーザーがカスタムイメージをアップロードすることができます。私は、チェックボックスに基づいてファイルのアップロードコントロールを非表示にして表示しようとしています。チェックボックスがオフの場合、ファイルアップロードコントロールを非表示にします。以下のコードを試しましたが、ページの読み込み時にチェックボックスがオンになっていると、ファイルのアップロードが表示されません。オフにしてチェックボックスをオンにすると、ファイルのアップロードが隠れて表示されます。ファイルアップロードをロード時に表示する方法「 - シーズンを選択 - 」とチェックボックスがチェックされている

<div class="row"> 
        <div class="col-sm-2"> 
         <label class="control-label">Seasons:</label><em style="color:red">*</em> 
        </div> 
        <div class="col-sm-4 form-group" > 
         <select name="seasonTypeSelect" required="" ng-model="selectedSeasonsType" class="dropdown form-control cl-sm-6" ng-options="season.SeasonTypeName for season in seasons" ng-change="updateImageUrl(selectedseasonsType)"> 
          <option value="">-- Select the Season --</option> 
         </select> 
        </div> 
        <span style="color:red" ng-show="submitted == true && mainForm.seasonTypeSelect.$error.required">Seasons is required</span> 
       </div> 
<div class="row"> 
        <div class="form-group col-md-8" style="padding-left: 0px !important;"> 
         <label class="control-label col-sm-3"> 
<input type="checkbox" ng-model="includeImage" ng-checked="true" ng-change="isImageInclude(includeImage)"> 
          Include Image 
         </label> 
         <img ng-src="{{testTypeImage_url}}" style="padding-left: 20px !important;height:40px" id="imgHolder" alt="Image will display here." class="imagerowStyle" /> 
         <br /> 
        </div> 
        <div class="form-group col-md-4 col-centered"> 

        <input type="file" class="form-control" id="imageUploadfile" name="Imagefile" accept="image/*" /> 
         <input type="button" name="imageUploadButton" ng-click="uploadFiles()" value="Upload" /> 
        </div> 
       </div> 

ドロップダウンが値を持っていない場合、ファイルアップロードコントロールにのみ表示される必要があります。以下は、使用されるコードです。これを達成する方法は？ おかげ

Answer 1

だけng-showは条件付きで表示/

Htmlのを隠すために内部のあなたのファイルアップロードコントロール上（req'd）モデルプロパティを含めてみてください：

<input type="file" ng-show="selectedSeasonsType && includeImage" />