2

I'm running into trouble trying to use Material Design Lite and AngularJS. After googling for a bit, I found another stack overflow post regarding a similar issue: Material Design Lite Integration with AngularJS

I am trying to load data into a table by pushing data from an ajax request into a model. From there the view is updated by AngularJS. Since the table uses Material Design Lite's javascript to add in functionality to select multiple entries, the new table entries do not seem to be updated with the proper classes/attributes.

As prescribed by others in the other stack overflow question, we need to run componentHandler.upgradeAllRegistered();. This does not seem to upgrade the elements correctly.

Here is a JSFiddle of an example: https://jsfiddle.net/chaseme/50n21fao/1/

Does anyone have any insight on this? Thanks.

Community
  • 1
  • 1
chaseme
  • 29
  • 4
  • This is an issue with the fact that the outer DOM `` has already been upgraded, and when new items are added via ng-repeat in async, the new upgrade instruction is ignored. This library solves the problem: https://github.com/iamisti/md-data-table. But it relies on ngMaterial, not mdl.
     – timsvoice Aug 14 '15 at 22:05
  • +1 for github.com/iamisti/md-data-table project. Now it has even virtual repeat feature too! Try it out. – Iamisti Jan 24 '16 at 22:59

1 Answers1

0

I suggest you use the angular-material-design-lite project. It's a simple wrapper that will handle the integration for you.

Or you could use the Angular team's implementation.

timsvoice
  • 367
  • 1
  • 9
  • The angular-material-design-lite project is pretty nice, however it does not have support for things like tables yet. Looking at Angular Material, it also seems to be lacking those table multi-select features. Rewriting the functionality is possible, but much less preferred if I can just use mdl. – chaseme Aug 14 '15 at 18:09