Question

我有一个输入文件如下：

<input id="identityDocument" name="identityDocument" ng-model="candidature.identityDocument"
                 ui-jq="filestyle" type="file" class="filestyle input-lg"
                 ui-options="{
                    buttonText: '{{'ACTIONS.UPLOAD' | translate}}',
                    iconName: 'fa fa-inbox'
                  }"
                 onchange="angular.element(this).scope().setFile(this,'identityDocument')"
                 accept="image/*" valid-file ng-required="identityDocument == null">

当我选择一个新文件时，会触发setFile函数，名为identityDocument的范围变量将包含已加载的图像。

加载此图片后，我使用此HTML代码进行预览：

<img ng-src="{{identityDocument}}" class="md-card-image img-responsive img-thumbnail" alt="{{'ERRORS.NO_PHOTO_SELECTED' | translate}}"></div>

这是有效的，但是当我第一次选择一个图像然后我第二次打开选择文件对话框然后我点击取消而不是打开时，我总是看到显示的图像，即使{{{取消选择对话框后，1}}变量设置为null。

这是我的identityDocument功能：

setFile

那么在$scope.setFile = function (element, name) { let reader = new FileReader(); reader.onload = function (event) { $parse(name).assign($scope, event.target.result); $scope.$apply(); }; try { reader.readAsDataURL(element.files[0]); } catch (err) { $parse(name).assign($scope, null); $scope.$apply(); } };变量设置为null后如何隐藏图像？

Answer 1

试试这个：

<img ng-src="{{identityDocument}}" ng-show="identityDocument" class="md-card-image img-responsive img-thumbnail" alt="{{'ERRORS.NO_PHOTO_SELECTED' | translate}}"></div>

注意ng-show显示truthy值上的元素并将其隐藏在falsey值（null）

使用ng-src在输入文件

1 个答案: