CODEWITHSUNDEEP
javascriptcssangularjsanimationangularjs-directive
Sukumar MS
Sukumar MS

Reputation: 748

angular slide-toogle animation not working inside ng-repeat?

hi i am new to angular animation,i need to animate the div like this click Here

Based on the above link i tried the animation to the div inside ng-repeat but i am this error while doing this Uncaught Type Error: Cannot read property 'query Selector' of null(…). Here is the link which i tried FIDDLE HERE

html

<div ng-app="angularSlideables"  ng-controller="myctrl">
<div ng-repeat="menu in menuArray">
<div slide-toggle="#derp" ng-click="showItem(menu.displayName);">
        <h2><b>{{menu.displayName}}</b></h2>
      </div>

    <div id="derp" class="slideable" ng-repeat="item in menu.items" ng-show="state">
         <span class="md-subhead"><i>{{item.shortDesc}}</i></span>
    </div>
  </div> 
</div>

controller

angular.module('angularSlideables', [])
.controller('myctrl', function($scope){
$scope.menuArray = [{displayName:'jhon',items:[{shortDesc:'NYC'}]},{displayName:'rock',items:[{shortDesc:'canada'}]},{displayName:'punk',items:[{shortDesc:'Aus'}]}]
})
.directive('slideable', function () {
    return {
        restrict:'C',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0px',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
})
.directive('slideToggle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var target = document.querySelector(attrs.slideToggle);
            attrs.expanded = false;
            element.bind('click', function() {
                var content = target.querySelector('.slideable_content');
                if(!attrs.expanded) {
                    content.style.border = '1px solid rgba(0,0,0,0)';
                    var y = content.clientHeight;
                    content.style.border = 0;
                    target.style.height = y + 'px';
                } else {
                    target.style.height = '0px';
                }
                attrs.expanded = !attrs.expanded;
            });
        }
    }
});

Upvotes: 1

Views: 224

Answers (1)

Vali D
Vali D

Reputation: 541

The main issue is the fact that you have an id on ng-repeat. Id is a singelton value meaning you can't have two elements with the same id.

try that:

<div id="derp">
  <div class="slideable" ng-repeat="item in menu.items">
    <span class="md-subhead"><i>{{item.shortDesc}}</i></span>
  </div>
</div>

It should solve the error you are getting and help you move forward on this feature.

Let me know if it helped :)

Upvotes: 0

Related Questions