data-ng-src with if condition

Question

我有一个用我显示的图像：

<img data-ng-src="data:image/jpg;base64,{{selectedReport.reportImage.imageFile.data}}"/>

以上数据来自我的数据库。

当用户点击编辑记录并选择存储在变量imageFile中的新图像时，我想显示此imageFile而不是提取的记录。

如何在data-ng-src中使用if条件？
单独这些工作，但我想应用if条件，我说，如果ImageFile，那么

data-ng-src="{{imageFile}}"

否则

data-ng-src="data:image/jpg;base64,{{selectedReport.reportImage.imageFile.data}}"

我试着这样做：

data-ng-src = {{imageFile}} and data-err-src = "data:image/jpg;base64,{{selectedReport.reportImage.imageFile.data}}"/>

但这不起作用。

Answer 1

AngularJS视图支持二元运算符

condition && true || false

因此，您的img标记看起来像这样

<img data-ng-src="{{ imageFile != '' && imageFile || 'your-default-image' }}"/>

注意：您可以使用任何条件来了解imageFile是否存在或具有值。

注意2 ：引号（即＆＃39; your-default-image＆＃39;）在这里很重要。它没有引号就无法工作。

Answer 2

我认为你应该只使用一个在你的控制器中声明的函数来处理这种情况。

在您的控制器中：

 $scope.getImage = function (){
    return $scope.imageFile || [your_default_image_file];
 }

在您的HTML中，例如：

<img data-ng-src="{{getImage()}}"/>

我希望它有所帮助。