Angular Material md-virtual-repeat list item selection

Question

I am not clear on how to setup so I can select an item from a virtual repeat list. I would like the onclick of an item to set a model variable and display the ripple animation.

<div layout="column" flex="40" style="border:red 1px solid;min-height:75px;margin-right:0px;padding-right:0px;padding-bottom:0px;" layout-padding>
    <md-virtual-repeat-container id="rightSrc" layout-fill flex>
      <div md-virtual-repeat="s in items" class="repeated-item" flex>
        {{s.title}}
      </div>
    </md-virtual-repeat-container>
</div>

I have a Codepen here: http://codepen.io/ed4becky/pen/LGabqW

The demo displays without showing how to setup for selection

Answer 1

You can use md-button and md-ink-ripple . This should get you started, you probably just need to tweak some margins/paddings.

<div md-virtual-repeat="s in items | orderBy:'title'" class="repeated-item md-button" flex md-ink-ripple ng-click="alert(s)">
    {{s.title}}
</div>

http://codepen.io/kuhnroyal/pen/bEZzpY