Angular bootstrap-material-design removes ripple effect in ng-repeat

1
votes

I'm using bootstrap-material-design in my Angular app. The ripple effect works well throughout the app, though when using ng-repeat I'm losing the ripple effect.

I created an item outside the ng-repeat in the same <ul> and works fine.

Is it caused because of ng-repeat creates a new scope? If so how should I approach it correctly...?

Is there something I'm missing in my code?

<ul class="list-unstyled">
  <li class="btn" ng-repeat="data in eventsData">
    {{data.title}}
  </li>
</ul>
2
angularjstwitter-bootstrapmaterial-designbootstrap-material-design
Have you seen the incredible angular-material project? Highly recommend checking it out. It can do way more than this other framework: material.angularjs.org/latest - serraosays
@staypuftman I have, tried using it before the 1.0 release from a few days ago. I found that the documentation was lacking a bit for my knowledge, they give examples that you can learn from, but the basic layout structure is vague, and if you want to start from scratch it's not as friendly as they want it to seem - Alon Rosenfeld

2 Answers

1
votes

Looking at the documentation (very interesting project btw) I can see that you're not using the classes or tags that trigger a ripple. These are the default ones:

"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"

Try adding the .withripple class, or using a button / a tag inside your li tags

1
votes

Adding .withripple on the <ul> group will apply the ripple to the entire list, but it won't work to apply a ripple to individual elements. If you are loading a list dynamically then the repeated elements will be created after the Bootstrap Material library has initialized, so the ripple will not be applied to those elements.

To fix this, we must add the .withripple class to the repeated elements, and then initialize the library after the list has finished repeating so that the ripple can be applied. This can be done easily using Angular directives:

var app = angular.module('gradebook', []);
app.directive('repeatRipple', function() {
  return function(scope, element, attrs) {
    if (scope.$last) {
      return $.material.init();
    }
  };
});

...

<ul>
    <li ng-repeat="item in items" class="withripple" repeat-ripple>
<ul>