AngularJS ng-repeat img 视频答案

【问题标题】：AngularJS ng-repeat img ang videoAngularJS ng-repeat img 视频
【发布时间】：2014-04-18 15:37:45
【问题描述】：

如何实现滑块显示图片和视频的想法。

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

我有一个文件列表：

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'}
];

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

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

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

也许还有其他获取滑块的方法？

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

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

如果可以修改数据数组，

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'}
];

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

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

【讨论】：

【解决方案2】：

你见过http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation这个吗？对于不同的数据类型使用

ng-switch on="image"

然后和src或者title比较一下

ng-switch-when="image.src == 'video'"
#.... render video object here
ng-switch-default
  do some default behaviour of showing your image

很抱歉错过了 src 中的类型内容，或者您可以拆分字符串并使用相同的内容：) 您的选择

【讨论】：