Question

我希望通过一个小型的Accordion示例来证明AngularJS是多么的酷和简单，整个事情非常简单，在我的控制器中我有一个数组，我有一个ng-repeat，我绑定一些数据并应用css当ng-repeat的$ index与范围变量匹配时进行规则。它是所有简单的东西，这是我的控制器（我已经减少了这个例子中的一些文字）。

$scope.paymentTypes = [
  {name: 'Visa', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at!'},
  {name: 'Master Card', text: 'Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'}, 
  {name: 'Paypal', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'}, 
  {name: 'Bitcoin', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie.'}];

$scope.selectedType = null;

$scope.togglePayments = function (index) {
  if ($scope.selectedType === index) {
    $scope.selectedType = null;
  } else {
    $scope.selectedType = index;
  }
}

在我看来，这是我的ng-repeat ......

<div data-ng-repeat="ptype in paymentTypes track by $index" data-ng-click="togglePayments($index)">
  <div class="row u-padding-vert-s">
    <div class="col-xs-6 payment-type" data-ng-bind="ptype.name"></div>
    <div class="col-xs-6 text-right"><!-- put a logo here later --></div>
  </div>

  <div class="row u-slide-down" data-ng-hide="selectedType !== $index">
    <div class="col-xs-12" data-ng-bind="ptype.text">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-5 u-border-top-1"></div>
    <div class="col-xs-2 toggle-tab text-center">
      <span class="icon-ic_list_arrow_down"></span>
    </div>
    <div class="col-xs-5 u-border-top-1"></div>
  </div>
</div>

这是我创建的用于证明滑动打开和关闭动画的CSS：

.u-slide-down {
  transition: .3s linear all;
  overflow: hidden;
  background: yellowgreen;
  height: 200px;
}

.u-slide-down.ng-hide {
  height: 0px;
}

非常酷，但是这个例子依赖于所有隐藏的div具有相同的高度。在现实世界中，我更喜欢隐藏的div，它的高度更灵活，更有活力！由于内容不同，甚至可能在某些时候包含HTML。现在，当我在height: auto;类中将我的CSS设置为.u-slide-down时，动画就会丢失。我不想为此编写指令，因为我希望我的示例尽可能简单，所以有人可以建议我可以对CSS做什么以允许动态高度并保留动画吗？在此期间，我会尝试在https://jsbin.com中放一些东西...给我一分钟！

AngularJS中的CSS Accordion没有指令 - 固定高度问题

0 个答案: