Angularjs-如何在ng repeat中默认显示手风琴的第一个选项卡

var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.records=[
{
“姓名”：“阿尔弗雷德·富特基斯特”，
“国家”：“德国”
},
{
“姓名”：“Berglunds snabbköp”，
“国家”：“瑞典”
},
{
“名称”：“商业中心Moctezuma”，
“国家”：“墨西哥”
},
{
“名称”：“恩斯特·汉德尔”，
“国家”：“奥地利”
}
]
});

{{x.Name}
DFD
您可以将
ng class=：{'ng-hide'：$index>0}
添加到每个标记的主体中

它将把
ng-hide
类（基本上是带有
display:none；
的css）添加到每个不是第一个的选项卡主体（Index==0）-您也可以执行
ng-class=：：{'ng-hide'：$Index}
（简写版）

我还添加了
ng init=“showCompAcc=$index>0”
，当您单击每个选项卡时，它将为每个选项卡正确设置
showCompAcc
标志

：：
是一个一次性绑定，用于确保它将像模板呈现一样设置类，而不是在每个摘要周期中重置类


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.records=[
{
“姓名”：“阿尔弗雷德·富特基斯特”，
“国家”：“德国”
},
{
“姓名”：“Berglunds snabbköp”，
“国家”：“瑞典”
},
{
“名称”：“商业中心Moctezuma”，
“国家”：“墨西哥”
},
{
“名称”：“恩斯特·汉德尔”，
“国家”：“奥地利”
}
]
});

{{x.Name}
DFD
您可以将
ng class=：{'ng-hide'：$index>0}
添加到每个标记的主体中

它将把
ng-hide
类（基本上是带有
display:none；
的css）添加到每个不是第一个的选项卡主体（Index==0）-您也可以执行
ng-class=：：{'ng-hide'：$Index}
（简写版）

我还添加了
ng init=“showCompAcc=$index>0”
，当您单击每个选项卡时，它将为每个选项卡正确设置
showCompAcc
标志

：：
是一个一次性绑定，用于确保它将像模板呈现一样设置类，而不是在每个摘要周期中重置类


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.records=[
{
“姓名”：“阿尔弗雷德·富特基斯特”，
“国家”：“德国”
},
{
“姓名”：“Berglunds snabbköp”，
“国家”：“瑞典”
},
{
“名称”：“商业中心Moctezuma”，
“国家”：“墨西哥”
},
{
“名称”：“恩斯特·汉德尔”，
“国家”：“奥地利”
}
]
});

{{x.Name}
DFD
您可以使用angular ui bootstrap提供的uib手风琴


HTML


{{group.Country}

这是普朗克。

查看它
您可以使用angular ui bootstrap提供的uib手风琴


HTML


{{group.Country}

这是普朗克。

查看它
你可以添加
ng class=：：{'ng-hide'：$index>0}
-它会将
ng-hide
类添加到每个不是第一个的选项卡（index==0）-你也可以这样做
ng class=：：{'ng-hide'：$index}
（简写版）。如果你能提供代码片段，那就太好了。我已经附上了上面的工作片段@AlonEitanI添加了完整的示例您可以添加
ng class=：：{'ng-hide'：$index>0}
-它会将
ng-hide
类添加到不是第一个选项卡的每个选项卡（index==0）-您也可以这样做
ng class=：：{'ng-hide'：$index}
（速记版）。如果您可以提供代码片段，那就太好了。我已经附上了上面的工作片段@AlonEitanI添加了完整的示例谢谢。但这不起作用：单击其他选项卡时，它应该会显示其他选项卡详细信息，并隐藏默认选项卡详细信息或打开的选项卡@AlonEitan@Mohammed什么不起作用？告诉我，我会修改我的回答，我只是评论一下@AlonEitan@Mohammed我在这里添加了我的答案，但是当我在我的项目中实现它时，它不会显示任何选项卡吗@Aloneitan谢谢。但这不起作用：单击其他选项卡时，它应该会显示其他选项卡详细信息，并隐藏默认选项卡详细信息或打开的选项卡@AlonEitan@Mohammed什么不起作用？告诉我，我会修改我的回答，我只是评论一下@AlonEitan@Mohammed我在这里添加了我的答案，但是当我在我的项目中实现它时，它不会显示任何选项卡吗@AlonEitanIt显示此错误@nishantagarwal@Mohammed它在普朗克运作良好。似乎无法解决动画依赖关系。此错误在plunker或您的代码中？现在可以正常工作，默认情况下第一个选项卡处于打开状态除外@nishantagarwal@Mohammed阅读nishant回答中提供的文档链接中的
is open
属性是的，我发现在@nishantagrawal plunkr中，他将is open设置为false，除了first，这就是为什么first默认为open，但在我的情况下，数据来自后端，因此我无法将is open属性应用于所有对象，如何处理此问题？它显示此错误@nishantagarwal@Mohammed它在普朗克运作良好。似乎无法解决动画依赖关系。此错误在plunker或您的代码中？现在可以正常工作，默认情况下第一个选项卡处于打开状态除外@nishantagarwal@Mohammed在nishant的回答中提供的文档链接中阅读了关于
is open
属性的内容是的，我发现在@nishantagrawal plunkr中，他将is open设置为false，除了
$scope.groups = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany",
      "open" : true
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden",
      "open": false
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico",
      "open" : false
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria",
      "open" : false
    }
  ]

    <uib-accordion close-others="true"> 
     <div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open">

     {{group.Country}}
     </div>
   </uib-accordion>