AngularJS Accordion - 打开带有阵列的物体的手风琴

Question

我有这个代码来设置手风琴菜单：

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: []
    }
];
}

所以，在视图中我为每个项目做了ng-repeat：

<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>

但是当我点击对象内容为空的项目时，手风琴会显示如下：

有没有办法取消这些项目的手风琴功能？

Answer 1

is-disabled指令请参阅enablae /禁用第一个面板按钮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>