Hide and show File upload control based on condition in Angular Js

Question

I am using Angular Js. I have a checkbox named "Include Image", which is checked by default. I have a file upload control, using which users can upload custom images. I am trying to hide and show the file upload control based on the checkbox. If the checkbox is unchecked, I want to hide the file upload control. I have tried the below code, but on page load, when the checkbox is checked, the file upload is not showing. If I uncheck and check the checkbox, the file upload is hiding and showing. How to make the file upload visible in the load. Below is the code used:

<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>

The file upload control should only show if the dropdown does not have value "-- Select the Season --" and checkbox is checked. How to achieve this? Thanks

Answer 1

Just try including (req'd) model properties on your fileUpload control inside ng-show to conditionally show/hide

Html:

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