html - 如何在条件语句中显示img标签？

Question

您好，我有一个项目列表，我需要显示我正在使用 ionic 列表列出，因此在我的列表项中它包含图像或视频 json

"media": [{"type": "img","src": "http://images/2015/May/161887.jpg"},{"type": "video","src": "http:/video/2015/May/161887.mp4",}]

html 代码。

<div class="news_image" ng-repeat="image in item.media">
  {{ image.type=='video'? 'video':image.type=='<img src="{{ image.src}}'? 'image': 'default' }}
</div>

但这不起作用。

Answer 1

这是解决您的问题的一个好方法，使用 ng-if 您可以简单地有条件地添加/删除所需的元素。也看看 ng-src，这是将 URL 注入(inject) src 元素(例如 img)的好方法:

NgIf doc

JSFiddle

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="news_image" ng-repeat="image in items.media">
        <img ng-src="{{image.src}}" ng-if="image.type === 'img'" />
        <video ng-if="image.type === 'video'" width="320" height="240" controls>
          <source ng-src="{{image.src}}" type="video/mp4">
        </video>
    </div>
</div>

JS:

angular.module('myApp', [])
    .controller('myCtrl', function ($scope) {
    $scope.items = {
        "media": [{
            "type": "img",
            "src": "http://images/2015/May/161887.jpg"
        }, {
            "type": "video",
            "src": "http:/video/2015/May/161887.mp4",
        }]
    };
});