Angularjs 如何使用ng repeat在angular ui引导中打开第一个手风琴？

是否有任何选项可以在重复的基础上打开第一个手风琴

var-app=angular.module（'myApp'，['ui.bootstrap']）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.status={
是的，
一次性：对
};
$scope.cards=[{
“id”：1，
“银行识别号”：999999，
“类型”：“VISA”，
“否”：“1234 5678 9012 3456”，
“自”：“01/06”，
“到期日”：“2018年5月”，
“cvv”：345，
“姓名”：“Kallayi Basheer Shah”
}, {
“id”：2，
“银行ID”：8888888，
“类型”：“主控”，
“否”：“3456 7890 1234 5678”，
“自”：“06/12”，
“到期日”：“2016年7月”，
“cvv”：678，
“姓名”：“沙阿·巴希尔”
}, {
“id”：3，
“银行ID”：777777，
“类型”：“VISA”，
“否”：“9012345678”，
“自”：“2010年3月”，
“到期日”：“08/17”，
“cvv”：123，
“姓名”：“Basheer Shah Kallayi”
}];
});

{{card.no}
卡片上的名称：{{card.Name}

卡片类型：{{Card.type}
在模板中，绑定手风琴的is open属性，如下所示：

<accordion-group ng-repeat="card in cards" is-open="status.isItemOpen[$index]">


{{card.no}
卡片上的名称：{{card.Name}

卡片类型：{{Card.type}
当分配对模型开放时，如果您不打算动态更改行为，也可以使用

is-open="$first"

是的，angular ui手风琴具有
is open
属性，该属性与
ng repeat
兼容

使用
$first
可以在
中的所有内容都可用的情况下工作，但是，这不起作用

为了使第一个项目默认打开并仍保持雪佛龙（或其他内容）更新，只需为第一个项目指定其自己的手风琴组（范围中的布尔值），并参考第0个索引，如下所示：

accordiocontroller.js:

<accordion-group is-open="isFirstOpen" ng-if="cards.length > 0">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{cards[0].no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                         isFirstOpen, 'glyphicon-chevron-right': !isFirstOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{cards[0].name}} <br>
        Card Type: {{cards[0].type}}
    </div>
</accordion-group>

<accordion-group ng-repeat="card in cards.slice(1)" is-open="isOpen">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{card.no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                                   isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{card.name}} <br>
        Card Type: {{card.type}}
    </div>
</accordion-group>

$scope.isFirstOpen=true

accordionExample.html:

<accordion-group is-open="isFirstOpen" ng-if="cards.length > 0">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{cards[0].no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                         isFirstOpen, 'glyphicon-chevron-right': !isFirstOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{cards[0].name}} <br>
        Card Type: {{cards[0].type}}
    </div>
</accordion-group>

<accordion-group ng-repeat="card in cards.slice(1)" is-open="isOpen">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{card.no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                                   isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{card.name}} <br>
        Card Type: {{card.type}}
    </div>
</accordion-group>


查看此CodePen演示查看它的实际操作：
无法发现代码中明显的错误，您可以发布一个提琴吗？有控制台错误消息吗？@Icycool感谢您对这个问题的关注，这是代码的演示，为什么这与我的答案不同？@RazvanBalosinI我刚刚在答案的开头解释过，您也可以在单击“运行代码片段”时运行结果！我没有想到这一点，非常感谢你努力寻找答案。你在回答中的描述提供了很多知识。然而，我已经得到了一行的解决方案作为答案，它不需要太多的时间和编码行。