Angularjs

Question

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ]
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default" ng-repeat="x in records">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion"  ng-click="showCompAcc=!showCompAcc" showtab="">{{x.Name}}</a>
        </h4>
      </div>
      <div  ng-hide="showCompAcc" class="panel-collapse collapse ">
        <div class="panel-body">dfdfdfd</div>
      </div>
    </div>
  </div> 
</div>
  </body>
  </html>

这是带有 ng-repeat 的手风琴片段 data.Currently 它显示了所有选项卡。我想要的是默认情况下它应该只显示第一个打开的选项卡并且在单击其他选项卡时它应该显示其他选项卡详细信息并隐藏默认选项卡详细信息。

Answer 1

您可以在每个标签的正文中添加 ng-class=::{'ng-hide': $index > 0}。

它将添加 ng-hide class（基本上是 css 和 display: none;）到每个不是第一个（索引 == 0）的选项卡正文 -你也可以做ng-class=::{'ng-hide': $index}（Shorthand版本）。

我还添加了 ng-init="showCompAcc = $index > 0"，它将在您单击每个选项卡时正确设置 showCompAcc 标志。

:: 是一个 one-time 绑定，用于确保它会像模板呈现一样设置 class，而不是在每个摘要上重置 class周期。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ]
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default" ng-repeat="x in records" >
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" ng-click="showCompAcc=!showCompAcc" showtab="">{{x.Name}}</a>
        </h4>
      </div>
      <div  ng-hide="showCompAcc" ng-init="showCompAcc = $index > 0" ng-class="::{'ng-hide': $index}" class="panel-collapse collapse ">
        <div class="panel-body">dfdfdfd</div>
      </div>
    </div>
  </div> 
</div>
  </body>
  </html>

如果您想在点击其他标签时隐藏当前打开的标签，您可以执行以下操作：

var app = angular.module("myApp2", []);
app.controller("myCtrl", function($scope) {
  $scope.active = {record: 0};
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ]
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp2" ng-controller="myCtrl">

<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default" ng-repeat="x in records">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" ng-click="active.record = $index">{{x.Name}}</a>
        </h4>
      </div>
      <div  ng-if="active.record == $index" class="panel-collapse collapse ">
        <div class="panel-body">dfdfdfd</div>
      </div>
    </div>
  </div> 
</div>
  </body>
  </html>

这里我在控制器上加了一个flag

$scope.active = {
    record: 0
};

它在 records 数组中保存默认选项卡索引，我在 ng-click="active.record = $index" 中用单击的选项卡更新它。接下来，我们使用 ng-if="active.record == $index".

显示活动选项卡正文

Answer 2

您可以使用 angular ui bootstrap

提供的 uib-accordion

Angular ui accordion

$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
    }
  ]

HTML

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

这里是 plunker。 Plunker

看看

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

Angularjs - How to show by default first tab of accordion in ng-repeat

accordion

show-hide

angularjs-ng-repeat