Multiples Width

[rperrote]

I have two types of cards to show:

<div class="masonry-brick {{card.size}}" ng-repeat="card in $ctrl.cards | filter:$ctrl.filter.text"> <!-- | filter:filterText -->
          <span class="hide">{{card.keywords}}</span>
          <div ng-if="card.reveal" class="card">
            <div class="card-image waves-effect waves-block waves-light">
              <img class="activator" ng-src="{{$ctrl.img(card.img)}}">
            </div>
            <div class="card-content">
              <span class="card-title activator {{card.classContent}}" ng-bind-html="card.titulo | trust"></span>
            </div>
            <div class="card-reveal">
              <span class="card-title {{card.reveal.classReveal}}" ng-bind-html="card.reveal.titulo | trust"></span>
              <p>
                <a ng-repeat="link in card.reveal.links" href="{{link.href}}" target="_blank"><img ng-src="{{$ctrl.img(link.img)}}" alt=""></a>
              </p>
            </div>
          </div>

          <div ng-if="!card.reveal" class="card">
            <div class="card-image" ng-if="card.img">
              <img ng-src="{{$ctrl.img(card.img)}}">
            </div>
            <div class="card-action {{card.classContent}} white-text">
              <p><i ng-bind-html="card.descripcion | trust"></i>:</p>
              {{card.titulo}}
            </div>
          </div>

      </div><!-- Masonry -->

in {{card.size}} i have values like: col l8 m12, col l4 m12, etc.

Masonry only set the first width. I need multiples width from scope.

[rperrote]

I found a solution:

`<!-- Masonry -->
<div masonry="{{$ctrl.masonryOptions}}" reload-on-resize load-images="true" id="masonry-grid" class="row margin">
  <div class="grid-sizer col l3"></div>
  <div class="masonry-brick {{card.size}}" ng-repeat="card in $ctrl.cards | filter:$ctrl.filter.text"> <!-- | filter:filterText -->
      <span class="hide">{{card.keywords}}</span>
      <div ng-if="card.reveal" class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" ng-src="{{$ctrl.img(card.img)}}">
        </div>
        <div class="card-content">
          <span class="card-title activator {{card.classContent}}" ng-bind-html="card.titulo | trust"></span>
        </div>
        <div class="card-reveal">
          <span class="card-title {{card.reveal.classReveal}}" ng-bind-html="card.reveal.titulo | trust"></span>
          <p>
            <a ng-repeat="link in card.reveal.links" href="{{link.href}}" target="_blank"><img ng-src="{{$ctrl.img(link.img)}}" alt=""></a>
          </p>
        </div>
      </div>
      <a href="{{card.link}}" target="_blank">
        <div ng-if="!card.reveal" class="card">
          <div class="card-image" ng-if="card.img">
            <img ng-src="{{$ctrl.img(card.img)}}">
          </div>
          <div class="card-action {{card.classContent}} white-text">
            <p><i ng-bind-html="card.descripcion | trust"></i>:</p>
            {{card.titulo}}
          </div>
        </div>
      </a>

  </div><!-- Masonry -->`

With this options:
this.masonryOptions = {
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
// do not use .grid-sizer in layout
itemSelector: '.masonry-brick',
percentPosition: true
};