如何在不使用 ng-repeat Angularjs 的情况下移动下一个和上一个 div？答案

【问题标题】：how to move next and previous div without using ng-repeat Angularjs?如何在不使用 ng-repeat Angularjs 的情况下移动下一个和上一个 div？
【发布时间】：2017-08-22 20:41:18
【问题描述】：

我想在单击下一个和上一个按钮时创建移动到下一个和上一个部分。它工作正常。但是当我使用 ng-repeat 它停止工作这是 ng-repeat 代码

    <div class="bookaclass_main" ng-controller="NextAndPrev">
        <div class="col-md-12">
        <div class="row col-md-2-4" ng-class="{'card-hide': index  > $index + 1}" ng-repeat="card in cards" ng-style="{left: 2 ,'z-index': (cards.length - $index)}">
        <div class="col-md-4">a</div>
        <div class="col-md-4">b</div>
        <div class="col-md-4">c</div>
  </div>

<div class="keys">
  <button type="button" class="btn btn-next" ng-click="index = index < cards.length ? index + 1 : cards.length">Next</button>
   <button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
    {{index}}
     </div>
    </div>
   </div>
 </div>

这里是控制器

app.controller('NextAndPrev', function($scope) {    
    $scope.cards = [{},{},{}];
    $scope.index = 1;
});

它工作正常，但是当我使用这样的静态数据时，它会在左侧为所有 div 设置动画

<div class="bookaclass_main" ng-controller="NextAndPrev">
    <div class="col-md-12">
        <div class="row col-md-2-4" ng-class="{'card-hide': index > $index + 1}" ng-style="{left: 2 ,'z-index': (cards.length - $index)}">
            <div class="col-md-4">a</div>
            <div class="col-md-4">b</div>
            <div class="col-md-4">c</div>
        </div>
        <div class="row col-md-2-4" ng-class="{'card-hide': index > $index + 1}" ng-style="{left: 2, top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
            <div class="col-md-4">d</div>
            <div class="col-md-4">e</div>
            <div class="col-md-4">f</div>
        </div>
        <div class="row col-md-2-4" ng-class="{'card-hide': index > $index + 1}" ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
            <div class="col-md-4">d</div>
            <div class="col-md-4">e</div>
            <div class="col-md-4">f</div>
        </div>
        <div class="keys">
            <button type="button" class="btn btn-next" ng-click="index = index < cards.length ? index + 1 : cards.length">Next</button>
            <button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
            {{index}}
        </div>
    </div>
</div>

这是我的 CSS

.card-hide {
    left: -100px !important;
    opacity: 0 !important;
}
.col-md-2-4 {
    background: #fff;
    height: 20px;
    width: 100px;
    border: solid 1px #ccc;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

如何解决这个问题，请帮助我

【问题讨论】：

不是索引问题吗？每个 div 上的 ng-class="{'card-hide': index > $index + 1}" 可能是问题
@Groben 如何解决这个问题？当我使用 ng-repeat 时，它工作正常的解决方案是什么。
ng-class="{'card-hide': index > 1}" 在第一个 div，ng-class="{'card-hide': index > 2}" 在第二个等。尝试将 ng-repeat 的 html 结果与静态结果进行比较
@Groben 非常感谢

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

我在更改 ng-class 时解决了这个问题，如下面的代码。

<div class="bookaclass_main" ng-controller="NextAndPrev">
    <div class="col-md-12">
        <div class="row col-md-2-4" ng-class="{'card-hide': index > 1}" ng-style="{left: 2 ,'z-index': (cards.length - $index)}">
            <div class="col-md-4">a</div>
            <div class="col-md-4">b</div>
            <div class="col-md-4">c</div>
        </div>
        <div class="row col-md-2-4" ng-class="{'card-hide': index > 2}" ng-style="{left: 2, top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
            <div class="col-md-4">d</div>
            <div class="col-md-4">e</div>
            <div class="col-md-4">f</div>
        </div>
        <div class="row col-md-2-4" ng-class="{'card-hide': index > 3}" ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
            <div class="col-md-4">d</div>
            <div class="col-md-4">e</div>
            <div class="col-md-4">f</div>
        </div>
        <div class="keys">
            <button type="button" class="btn btn-next" ng-click="index = index < cards.length ? index + 1 : cards.length">Next</button>
            <button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
            {{index}}
        </div>
    </div>
</div>

【讨论】：