CODEWITHSUNDEEP
angularjstwitter-bootstrapmaterial-designbootstrap-material-design
Alon Rosenfeld
Alon Rosenfeld

Reputation: 1469

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

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>

Upvotes: 1

Views: 371

Answers (2)

cjbrooks12
cjbrooks12

Reputation: 1388

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>

Upvotes: 1

David Meza
David Meza

Reputation: 3180

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

Upvotes: 1

Related Questions