AngularJS ng-repeat img ang 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.

回答1:

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>

回答2:

have you seen http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation this? for different data-types use

ng-switch on="image"

and then compare it with src or title

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

sorry missed the type thing in your src, or you can split your string and use the same as well :) your choice

来源：https://stackoverflow.com/questions/23126005/angularjs-ng-repeat-img-ang-video

标签

angularjs

angularjs-ng-repeat