クリックでオブジェクトを繰り返したり、anglejを使ってスワイプする方法はありますか？

Question

私のようなオブジェクト要素のリストを持っている：

$scope.products = [ 
    { 
     name: 'First News Heading', 
     content: 'Lorem ipsum', 
     cover: 'img/img1.jpg' 
    }, 
    { 
     name: 'Second News Heading', 
     content: 'The veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim.', 
     cover: 'img/img2.jpg' 
    }, 

]; 

そして、私は次のようにその後、表示したい：一緒にNG-リピートディスプレイにそれらのすべてを使用して

<div class="thumbnail"> 
    <img ng-src="{{ product.cover }}"> 
     <p class="title">{{ product.name }}</p> 
     <p class="content">{{ product.content }}</p> 
</div> 

。次の要素を表示するには、クリックまたはスワイプを使用します。

Answer 1

次のことを試してみてください。

<div class="thumbnail"> 
    <img ng-src="{{product.cover}}"> 
    <p class="title">{{product.name}}</p> 
    <p class="content">{{product.content}}</p> 
</div> 
<input type="button" ng-click="previous()" value="Previous" /> 
<input type="button" ng-click="next()" value="Next" /> 

JS：

$scope.currentPosition=0; 
$scope.product=$scope.products[0]; //initialize the product var with first element 
$scope.next=function(){ 
    $scope.currentPosition++; 
    if($scope.currentPosition <$scope.products.length) 
     $scope.product=$scope.products[$scope.currentPosition]; 
    else 
     $scope.curentPosition=$scope.products.length-1; 
} 
$scope.previous=function(){ 
    $scope.currentPosition--; 
    if($scope.currentPosition >=0) 
     $scope.product=$scope.products[$scope.currentPosition]; 
    else 
     $scope.curentPosition=0; 
}