Question

我想创建移动到下一个和上一个按钮的下一个和上一个部分。它工作正常。但是当我使用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;
}

如何解决问题请帮帮我

Answer 1

我在更改类似下面的代码时解决了这个问题。

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

如何在不使用ng-repeat Angularjs的情况下移动next和previous div？

1 个答案: