Components are not working with Angularjs

[sunil-digicorp]

Hello,

We have not made Propeller components Angular compatible yet. But this is our roadmap. Still, you can discuss the issues you are facing and we will try our best to help you in any way, we can.

[nesticle8bit]

Thats right, i was trying to do a ngRepeat of checkboxes but didnt work

<div class="col-xs-4" ng-repeat="item in listado.Sedes">
       <div class="form-group pmd-textfield">
               <label class="control-label">{{item.Sede}}</label>
                    <div class="checkbox-sm">
                        <label class="pmd-checkbox pmd-checkbox-ripple-effect">
                                  <input id="item.Id" type="checkbox" ng-model="item.Check" />
                         </label>
                    </div>
        </div>
</div>

[immohammadjaved]

You can try this code on your controller

  angular.element(document).ready(function (){
        // checkbox
        $('.pmd-checkbox input').after('<span class="pmd-checkbox-label">&nbsp;</span>');
        // Ripple Effect //
        $(".pmd-checkbox-ripple-effect").on('mousedown', function (e) {
            var rippler = $(this);
            $('.ink').remove();
            // create .ink element if it doesn't exist
            if (rippler.find(".ink").length === 0) {
                rippler.append('<span class="ink"></span>');
            }
            var ink = rippler.find(".ink");
            // prevent quick double clicks
            ink.removeClass("animate");
            // set .ink diametr
            if (!ink.height() && !ink.width()) {
                //  var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
                ink.css({ height: 20, width: 20 });
            }
            // get click coordinates
            var x = e.pageX - rippler.offset().left - ink.width() / 2;
            var y = e.pageY - rippler.offset().top - ink.height() / 2;
            // set .ink position and add class .animate
            ink.css({
                top: y + 'px',
                left: x + 'px'
            }).addClass("animate");
            setTimeout(function () {
                ink.remove();
            }, 1500);
        });
    });