Changing images on page (using hopefully angular) on a key being pressed

Question

So, I have this array.

app.controller("ImagesController", function($scope){
    $scope.selectedImage = 0;
    $scope.images = [
        {
            image1: 'images/levels/level1/sky.jpg',
            image2: 'images/levels/level1/rain.jpg',
            image3: 'images/levels/level1/sky.jpg'
        },
        {
            image1: 'images/levels/level2/horse.jpg',
            image2: 'images/levels/level2/dog.jpg',
            image3: 'images/levels/level2/cat.jpg'
        }
    ];

I'll be adding more images to the array above. I want three images to be on my html page at a time. Then as I press the right/left arrow key, I want the three images to get swapped for the next 3 images and so on(basically move the array to the next element I guess). Is this possible using AngularJS or Jquery? If it is, then how do I implement it?

EDIT: I'm okay with not using AngularJS as well and going for a simpler approach to changing the images, but I need that to happen fast.

Is this possible using AngularJS or Jquery? to answer your question, simply possible. — Krupal Shah, Jul 19 '14 at 19:20
It sounds like you want something like - http://owlgraphic.com/owlcarousel/demos/images.html , there are hundreds of js plugins available to do this sort of thing. — Dylan, Jul 19 '14 at 19:26
no need to overcomplicate it with properties `image1,image2,image3` , just use flat array. In angular change array and view changes — charlietfl, Jul 19 '14 at 19:29
Dylan, I went to the website. That won't help and I want to make it myself anyway. charlietfl, Check the code again. I've updated it. Can't use flat array, I think. — Nakul Pathak, Jul 19 '14 at 19:36

score 0 · Answer 1 · answered Jul 19 '14 at 19:39

I would use jQuery for this. You could tie it into an event like so using an index to select specific data "images" sets.

$('selector').keydown(function(key){
  if (key.keyCode == 'your desired key') {
      $scope.images[0..2];
 }

however you may want to rethink your array of images to better traverse through the sets in 3's like desired.

score 0 · Answer 2 · answered Jul 19 '14 at 19:45

rather than going jquery way... better to do it angular way... firstly you can use angular ui's carousel directive..

its very simple to use, plus have lots of options

   <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>

in case you want to roll out your own implementation, you can do it using ui-keypress or ui-events directive available again at angular-ui, link here

<input ui-event="{ blur : 'blurCallback($event)' }">

<script>
$scope.blurCallback = function(evt) {
alert('Goodbye. Input content is: ' + evt.target.value);
};
</script>

OR

<textarea
        ui-keypress="{13:'keypressCallback($event)'}">
</textarea>

Hi harish. Thank you for your answer but I am having trouble including angular-ui. I have already tried this- http://stackoverflow.com/questions/12472244/how-to-integrate-angularui-to-angularjs — Nakul Pathak, Jul 23 '14 at 08:05
Harish I have successfully included angular-ui but the ui-keypress answer is not working. Please try to make it work locally and let me know if it works for you. What files do I include to make it work? — Nakul Pathak, Jul 23 '14 at 09:12

Changing images on page (using hopefully angular) on a key being pressed

2 Answers2