AngularJS Accordion - open accordion with the objects which just have an array

Question

I have this code to set the accordion menu:

function AccordionDemoCtrl($scope) {

   $scope.oneAtTime = true;

   $scope.links = [
    {
        img: '/web/bundles/lima3main/images/icon-l3play.png' ,
        option: 'L3 Pay' ,
        content: [
            {
                title: 'Single Payment'
            },
            {
                title: 'Recurring Billing'
            },
            {
                title: 'ACH'
            }
        ]
    },
    {
        img: '/web/bundles/lima3main/images/icon-l3bridge.png' ,
        option: 'L3 Bridge' ,
        content: []
    },
    {
        img: '/web/bundles/lima3main/images/icon-l3connect.png' ,
        option: 'L3 Connect' ,
        content: []
    },
    {
        img: '/web/bundles/lima3main/images/icon-costumerManagement.png' ,
        option: 'Customer Management' ,
        content: []
    },
    {
        img: '/web/bundles/lima3main/images/icon-productManagement.png' ,
        option: 'Product Management' ,
        content: []
    },
    {
        img: '/web/bundles/lima3main/images/icon-invoiceManagement.png' ,
        option: 'Invoice Management' ,
        content: []
    },
    {
        img: '/web/bundles/lima3main/images/icon-reports.png' ,
        option: 'Reports' ,
        content: []
    },
    {
        img: '/web/bundles/lima3main/images/icon-alerts.png' ,
        option: 'Alerts' ,
        content: []
    }
];
}

So, in the view i did a ng-repeat for each item:

<div ng-app="accordion-base" >
    <div ng-controller="AccordionDemoCtrl">
        <accordion close-others="oneAtTime">
            <accordion-group ng-repeat="link in links">
                <accordion-heading>
                <img class="marginleft" src="{{link.img}}">
                {{link.option}}
                </accordion-heading>
                <div ng-if="link.content != 0">
                    <ul>
                        <li ng-repeat="content in link.content">{{content.title}}</li>
                    </ul>
                </div>
            </accordion-group>
        </accordion>
    </div>
</div>

But when i click in items that have the object content empty, the accordion appears like this:

enter image description here

Is there any way to cancel the accordion functionality for those items ?

sylwester · Accepted Answer · 2014-06-25 14:54:27Z

1

is-disabled directive please see enablae/disable first panel button here http://angular-ui.github.io/bootstrap/#/accordion

 <div ng-app="accordion-base" >
        <div ng-controller="AccordionDemoCtrl">
            <accordion close-others="oneAtTime">
                <accordion-group ng-repeat="link in links" is-disabled="link.content.length==0">
                    <accordion-heading>
                    <img class="marginleft" src="{{link.img}}">
                    {{link.option}}
                    </accordion-heading>
                    <div ng-if="link.content != 0">
                        <ul>
                            <li ng-repeat="content in link.content">{{content.title}}</li>
                        </ul>
                    </div>
                </accordion-group>
            </accordion>
        </div>
    </div>

answered Jun 25, 2014 at 14:54

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sylwester Over a year ago

please have a look here is working with your data plnkr.co/edit/OIX3gbBEQQJxyvOGkUzV?p=preview

Collectives™ on Stack Overflow

AngularJS Accordion - open accordion with the objects which just have an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related