Conflicts with ngMaterial

[Pyrax]

I am trying to achieve a simple list with ngRepeat where the items are selectable. Furthermore, I am using Angular Material, so instead of <li> I use <md-list-item>.

However, when using the directive together with the md-list-item directive of Angular Material there is no update taking place.

Any suggestions for a solution or a workaround with both directives?

Example usage:

<md-list>
    <md-list-item ng-repeat='user in panel.users'
        selection-model
        selection-model-mode="'multiple-additive'">
            <md-button>{{ user.name }}</md-button>
    </md-list-item>
</md-list>

[jtrussell]

Would you mind putting together a jsbin/plunkr demonstrating the issue? Also, are there any errors reported in the console?

[Pyrax]

https://plnkr.co/edit/eV0ExMdwrvKLHJjW76Y3?p=preview
Changing <md-list-item> to e.g. <li> everything works fine. No errors in console.
I guess the problem might be that <md-list-item> is also listening to the click event.

[jtrussell]

Just took a look through the ngMaterial source for mdListItem... womp womp:

https://github.com/angular/material/blob/v1.1.0-rc1/src/components/list/list.js#L308

So yes, they're actively removing click handlers from list items. I don't know ngMaterial enough to know why but it does feel a bit heavy handed.

As for workarounds - just waiting on tests here #48 and then you could use an event other than click as a workaround.

[Pyrax]

Sounds like a nice idea to add a property for specifying other events.

In the meantime, I'll use a temporary solution which wraps the event handler in a timeout to ensure that it's added after ngMaterial removes the click event (I've added it to plunker in line 427).

[jtrussell]

Oh incidentally, it doesn't look like md-list-item needs to be a direct child of md-list. So something like this:

<md-list>
  <div ng-repeat="foo in bar" selection-model>
     <md-list-item>Wowza</md-list-item>
  </div>
</md-list>

should also work and might be more palatable :).

[Pyrax]

Thanks. Works indeed and is the most straightforward solution.
Also, this issue is more related to ngMaterial than angular-selection-model ;-)