在Angular Js中隐藏并显示基于条件的文件上传控件



我使用的是Angular Js。我有一个名为"包括图像"的复选框,它在默认情况下是选中的。我有一个文件上传控件,用户可以使用它上传自定义图像。我正在尝试隐藏和显示基于复选框的文件上载控件。如果复选框未选中,则我希望隐藏文件上载控件。我已经尝试了下面的代码,但在页面加载时,当复选框被选中时,文件上传不会显示。如果我取消选中并选中复选框,则文件上载将隐藏并显示。如何使文件上传在加载中可见。以下是使用的代码:

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

只有当下拉菜单没有值"--选择季节--"并且复选框被选中时,文件上传控件才应该显示。如何做到这一点?感谢

只需尝试在文件中包含(req'd)模型属性即可在ng-show中上传控件,以有条件地显示/隐藏

Html:

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

最新更新