在正在按鍵的頁面上更改圖像（使用希望角度）

所以，我有這個數組。在正在按鍵的頁面上更改圖像（使用希望角度）

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

我將在上面的數組中添加更多的圖像。我想要一次在我的html頁面上顯示三張圖片。然後，當我按下右/左箭頭鍵時，我想讓三張圖像交換爲接下來的3張圖像等等（基本上將數組移動到我猜測的下一個元素）。這可能使用AngularJS或JQuery？如果是，那我該如何執行它？

編輯：我沒有使用AngularJS以及更簡單的方法來改變圖像，但我需要這種事情發生得很快。

來源

2014-07-19 nakulpathak3

這可能使用AngularJS或Jquery嗎？回答你的問題，簡單的可能。 –

這聽起來像你想要的東西 - http://owlgraphic.com/owlcarousel/demos/images.html，有數百個js插件可用來做這種事情。 – Dylan

不需要使用屬性'image1，image2，image3'來過度複雜它，只需使用平面數組。在角度改變陣列和視圖更改 – charlietfl

我會爲此使用jQuery。你可以將它綁定到一個事件中，像使用索引來選擇特定數據「圖像」集。

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

但是，您可能想要重新考慮您的圖像數組，以更好地遍歷所需的3個集合。

來源

2014-07-19 19:39:19 eStiffler

，而不是去jQuery的方式...好做角方式...首先，你可以使用angular ui's carousel directive ..

它的使用方法很簡單，再加上有很多的選擇

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

如果你想推出自己的實現，您可以使用用戶界面，按鍵或UI事件在角UI再次指令可以做到這一點，link here

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

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

或

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

來源

2014-07-19 19:45:29 harishr

嗨哈里斯。謝謝你的回答，但我遇到了麻煩，包括angular-ui。我已經試過這個 - http://stackoverflow.com/questions/12472244/how-to-integrate-angularui-to-angularjs – nakulpathak3

Harish我已經成功地包含了angular-ui，但是ui-keypress的回答沒有工作。請儘量讓它在本地工作，並讓我知道它是否適用於您。我包含哪些文件以使其工作？ – nakulpathak3

你可以設置一個運動員嗎？會檢查你的運動員 – harishr

在正在按鍵的頁面上更改圖像（使用希望角度）

回答

相關問題