have multiple snap-drawes and snap-contents in a page

Question

I have a list of movies in a page, and I want to add slide left to show movie times and slide right to show movie cinemas.

I tried to have snap-drawers and snap-content for each item in the list, but that didn't work.

Does anyone have idea how to make that possible.

The code: http://plnkr.co/edit/eFMdPBlWRKbCNYN3tzPx?p=preview

<div class="container">
    <div class="row">
      <ul>
        <li>
          <snap-drawers snap-id="'movie1'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie1'">
            <snap-dragger>
              <h1>Movie 1</h1>
            </snap-dragger>
          </snap-content>
        </li>
        <li>
          <snap-drawers snap-id="'movie2'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie2'">
            <snap-dragger>
              <h1>Movie 2</h1>
            </snap-dragger>
          </snap-content>
        </li>
        <li>
          <snap-drawers snap-id="'movie3'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie3'">
            <snap-dragger>
              <h1>Movie 3</h1>
            </snap-dragger>
          </snap-content>
        </li>
      </ul>
    </div>
  </div>

Thanx,

score 0 · Accepted Answer · answered Apr 05 '15 at 09:32

0

I believe your all element has been rendered on the HTML, but they don't have proper alignment. You should provide the proper alignment using right or left option like snap-drawers="left", snap-drawer="left" , snap-content="left", etc

Markup

<li>
    <snap-drawers="left" snap-id="'movie1'">
     <snap-drawer="left">
        Movie times
     </snap-drawer>
     <div snap-drawer="right">
         Movie cinemas
     </div>
     </snap-drawers>
     <snap-content="left" snap-id="'movie1'">
        <snap-dragger>
          <h1>Movie 1</h1>
        </snap-dragger>
     </snap-content>
</li>

Working Plunkr

answered Apr 05 '15 at 09:32

Pankaj Parkar

134,766
23
234
299

the code you posted is broken, I need a list of items each one has different slide left/right, for example: android contact – Ya Basha Apr 05 '15 at 13:21
@YaBasha I didn't get you, can you give me some example? – Pankaj Parkar Apr 05 '15 at 13:44
1

I want a list of items (movies names), when I slide to left on item1 it shows actions1, and when I slide to right it shows events 1, and so on. I gave for example android contacts book where it has many addresses when you slide left on any of them it open message form for that address and when you slide right it calls the address. If that's not possible with angular-snap please advice any other angular solution. – Ya Basha Apr 05 '15 at 14:04

have multiple snap-drawes and snap-contents in a page

1 Answers1