如何使用 angularjs 在单击或滑动时重复对象？

Posted 2023-05-09

【中文标题】如何使用 angularjs 在单击或滑动时重复对象？

【英文标题】：How can I repeat through objects on click or swipe using angularjs?

【发布时间】：2016-09-28 22:41:00

【问题描述】：

我有一个对象元素列表，例如：

$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'
    ,

];

然后我想显示如下：

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

使用 ng-repeat 将所有这些显示在一起。但我想使用单击或向上滑动来显示下一个元素。

【问题讨论】：

我想你在找轮播。github.com/angular-ui/bootstrap/tree/master/src/carousel

请添加您的 ng 重复模板

thumbnail div 是 ng-repeat 模板

【参考方案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;