javascript - 如何在 Angular ngRepeat 中翻转卡片

Question

我使用 ngRepeat 在容器内显示了一系列“卡片”，如下所示

<div class="flip-container">
<div style="display:inline-block" ng-repeat="c in vm.car">
  <my-car-card car='c'></my-car-card>
</div>

哪里<my-car-card>是一个自定义指令。添加到我之前的示例中，我想尝试在某些事件上翻转这些卡片(这里仅使用按钮单击。我一直在遵循另一个 post 的示例，它指向此 fiddle ，但我只是在我的情况下无法让它工作。我尝试使用此方法，如 plunk 。

我已将CSS复制到style.css中并将该类重命名为 flip1至flip-container ，并去掉了一些尺寸和颜色，这样它们就不会覆盖“卡片”的任何现有样式。

main.html 中的“父容器”位于上面显示的代码片段中，其余部分位于 car.html 中。

<div class="card car-card" ng-class="{'flipped':isFlipped}"
   style="padding: 5px;margin:5px;background-color:wheat">

<div class="face front">
 <div class="cartitle">
    <div class="cartext" >{{car.title}}</div>
   </div>
 <div class="carul" ng-repeat="p in properties" animate-on-change="p.text">{{p.text}}</div>
</div>  

<div class="face back">
  Back of card
</div>

我在 _scope.flipped = !_scope.flipped; 行设置“翻转”在car.js如下。

function onChange(msg, data) {
    if (_scope.car.title === "CAR 001"){
      _scope.properties[0].text = data + (i++);
      _scope.flipped = !_scope.flipped;
    }
  }

单击按钮时调用 onChange，我在那里设置另一个属性，以便我可以看到它正在被调用)

可以看出，在插入时，它根本不适合我，并且显示完全困惑(删除行 position: absolute; .flip-container .card .face { 允许修复显示)。

希望比我更了解和理解这个 CSS 技巧的人能够指出我在尝试将其转移到我的场景中时做错了什么，我只是看不出哪里出了问题以及如何继续前进。

预先感谢您的帮助!

Answer 1

改变一些事情:

1. 为样式添加高度和宽度:“.flip-container .card”
2. 将此添加到 HTML“卡片”标记:ng-click="isFlipped=!isFlipped"

3. 更改此 CSS:

   .flip-container .card .back {
     -webkit-transform: rotatex(-180deg);    
   }
   

这是您修改后的plunk:

http://plnkr.co/edit/xaznyVXJvfa7UDcSlB2e?p=preview

哦，你需要在你的函数中设置“isFlipped” - 而不是“flipped”。像这样:

      scope.isFlipped = !scope.isFlipped;

我也在 plunk 中更新了它