1

I have a series of "cards" displayed inside of a container using ngRepeat as follows

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

where <my-car-card> is a custom directive. Adding to a previous example I had, I wanted to try and flip these cards on certain events (here just using a button click. I have been following an example from another post, which points to this fiddle, but I just cannot get it working in my case. I have tried to use this method as at this plunk.

I have copied the css into style.css and renamed the class flip1 to flip-container, and stripped out some of the size and color, so they do't override any of my existing styles I will have for the 'card'.

The "parent container" in main.html is in the snippets shown above, and the rest is in the 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>

and I am setting the 'flipped' at the line _scope.flipped = !_scope.flipped; in car.js as below. 

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

the onChange is called on the button click, I am setting one other property in there just so I can see it is being called)

As can be seen, at the plunk, it is not working for me at all, and the display is totally messed up (removing the line position: absolute; .flip-container .card .face { allow the display to be fixed).

Hoping someone who knows and understands this css trick better than myself can point t what I am doing wrong in attempting to transfer this over into my scenario, I Just cannot see what is wrong and how to move forward.

Thanks in advance for any help here!

Community
  • 1
  • 1
peterc
  • 6,921
  • 9
  • 65
  • 131

1 Answers1

0

Change a few things:

  1. add height and width to style: ".flip-container .card"
  2. add this to HTML 'card' tag: ng-click="isFlipped=!isFlipped"

  3. Change this css:

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

Here's your modified plunk:

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

Oh, and you need to set "isFlipped" - NOT "flipped" in your function. like this:

      scope.isFlipped = !scope.isFlipped;

I updated that in the plunk as well

William Schroeder McKinley
  • 778
  • 6
  • 15
  • thankyou very much for the above. Can the above be done without having to set a fixed height on the card, I was hoping a allow these cards to grow in height to fit the contents? – peterc Dec 30 '15 at 16:07
  • The thing that messes up your height is "position: absolute" in ".flip-container .card .face" If you need to position this absolutely, that needs to be on an outer element. – William Schroeder McKinley Dec 30 '15 at 16:52
  • @peterc - let me know if you need more info – William Schroeder McKinley Dec 31 '15 at 00:58
  • thanks for that. Amazing just removing that `"position: absolute`, and setting the height of the `.back` to zero seems to work perfectly. I just now just have one more issue. Now moving all this (stripped down) example into my app, the `backface-visibility` does not seem to work - I always now see "through " to the front contents. I discovered this is due to the **Ionic css** (that I use in the app proper). [Here](http://plnkr.co/edit/eWGWkD6WKiNZB4Zy3pJj) is an upate.. uncomment the ref to `ionic.css` to see what I mean. Trying to track the offending property (so I can undo it) – peterc Dec 31 '15 at 03:05