我如何翻轉卡片角ngRepeat

裏面有一系列的「卡」使用ngRepeat作爲容器的內部顯示如下我如何翻轉卡片角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，並去掉了一些大小和顏色，所以他們do't '覆蓋'我現有的任何樣式

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>

，我設定car.js的 '翻轉' 在該行_scope.flipped = !_scope.flipped;如下。

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技巧比我自己可以點讀筆什麼，我在嘗試通過轉移到我的方案這樣做錯了，我看不出有什麼是錯的，如何前進。

在此先感謝您的幫助！

來源

2015-12-30 peterc

變化的幾件事情：

附加高度和寬度的風格：「.flip容器.card」
將它添加到HTML '卡' 標籤：NG-點擊=「isFlipped =！ isFlipped」

更改這個CSS：

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

這是你修改普拉克：

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

哦，你需要設置「isFlipped」 - 不是「翻轉」在你的功能。像這樣：

 scope.isFlipped = !scope.isFlipped;

我更新，在普拉克以及

來源

2015-12-30 08:39:43

三江源非常多的上方。上述操作可以不必在卡上設置一個固定的高度，我希望允許這些卡在高度上增長以適應內容？ – peterc

在「.flip-container .card .face」中，弄亂你的身高的東西是「位置：絕對的」如果你需要完全確定它的位置，那就需要在外部元素上。 –

@peterc - 讓我知道你是否需要更多信息 –

我如何翻轉卡片角ngRepeat

回答

相關問題