AngularJS ng-repeat img ang 视频 [英] AngularJS ng-repeat img ang video

问题描述

如何实现显示图像和视频的滑块的想法.

如何通过不同数据类型的 ng-repeat 获得重复?

我有一个文件列表:

var scr = [{src: 'img1.png', title: '图片 1'},{src: 'img2.jpg', 标题: '图片 2'},{src: 'vid1.mp4', 标题: 'Vid 1'},{src: 'vid2.mp4', 标题: 'Vid 2'}];

图片可以通过ng-repeate插入:

<img src="./img/slides/{{image.src}}"/>

如何在此列表中插入视频?

• 也许还有其他方法可以获得滑块?

如有任何帮助，我将不胜感激.

解决方案

如果可以修改数据数组，

var scr = [{src: 'img1.png', title: 'Pic 1', type: 'imge'},{src: 'img2.jpg', title: 'Pic 2', type: 'imge'},{src: 'vid1.mp4', title: 'Vid 1', type: 'video'},{src:'vid2.mp4'，标题:'Vid 2'，类型:'视频'}];

然后就可以使用ng-if来确定要使用的元素

<img ng-if="media.type == 'image'" ng-src="./img/slides/{{media.src}}"/><video ng-if="media.type == 'video'" ng-src="{{media.src}}"></video>

How to implement the idea of ​​a slider showing images and video.

How to get repetition via ng-repeat of different data types?

I have a list of files:

var scr = [
{src: 'img1.png', title: 'Pic 1'},
{src: 'img2.jpg', title: 'Pic 2'},
{src: 'vid1.mp4', title: 'Vid 1'},
{src: 'vid2.mp4', title: 'Vid 2'}
];

Images can be inserted through ng-repeate:

<div class="slide" ng-repeat="image in images" ng-show="image.visible">
        <img src="./img/slides/{{image.src}}"/>
</div>

How to insert videos in this list?

• Maybe there are other ways to get a slider?

I would be grateful for any help.

解决方案

If you can modify the data array,

var scr = [
  {src: 'img1.png', title: 'Pic 1', type: 'imge'},
  {src: 'img2.jpg', title: 'Pic 2', type: 'imge'},
  {src: 'vid1.mp4', title: 'Vid 1', type: 'video'},
  {src: 'vid2.mp4', title: 'Vid 2', type: 'video'}
];

Then you can use ng-if to determine the element to use

<div class="slide" ng-repeat="media in scr">
  <img ng-if="media.type == 'image'" ng-src="./img/slides/{{media.src}}" />
  <video ng-if="media.type == 'video'" ng-src="{{media.src}}"></video>
</div>

这篇关于AngularJS ng-repeat img ang 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！