angularjs中的可折叠数据行答案

【问题标题】：collapsable data row in angular jsangularjs中的可折叠数据行
【发布时间】：2016-04-24 05:51:36
【问题描述】：

我想在不使用面板的情况下以可折叠格式显示父子相关数据。

代码：

<div  ng-app="app" ng-controller="customersCtrl"> 
     <table st-table="rowCollection" class="table table-striped">
         <tbody>
             <tr ng-repeat="x in names">
                 <th > {{x.Country }}</th>
                 <td >{{ x.Name }}</td>
             </tr>
         </tbody>
     </table>  
</div>

首选：

我想在国家/地区下获得名称列表，扩展后我应该能够看到该国家/地区的名称列表。

【问题讨论】：

Accordion 来自 bootstrap，它是为响应而设计的。因此，它不依赖于表格 HTML 对象。另一种实现方式是使用 ng-if/ng-show 指令和 $animate 进行转换。但是，这不适用于表格。为什么不从引导程序向手风琴添加一些类并覆盖面板中您不想要的 CSS 定义？

标签： angularjs angularjs-ng-repeat angular-ui-bootstrap ngtable

【解决方案1】：

我建议你使用 angular-ui-bootstrap 的 accordion 指令： https://angular-ui.github.io/bootstrap/#/accordion

或者，您可以在 ng-repeat 中使用 collapse 指令：https://angular-ui.github.io/bootstrap/#/collapse。

【讨论】：

【解决方案2】：

添加一些我必须经历的发现和发展，

在您的 HTML 中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.min.js"></script>    

<!-- custom angular script -->
<script src="js/app.js"></script>

在用于创建动画的 HTML 中

<div ng-app ="myApp" ng-controller="customersCtrl">
    <uib-accordion close-others="oneAtATime">
            <uib-accordion-group is-open="status.open" ng-repeat="x in names">
                 <uib-accordion-heading >
                    {{ x.Name }} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}">
                </uib-accordion-heading>
                    {{ x.City }} </br>
                    {{ x.Country }} </br>
             </uib-accordion-group>
    </uib-accordion>
</div>

你的 app.js

var myApp = angular.module('myApp', ['ngAnimate','ui.bootstrap']);
myApp.controller('customersCtrl', function($scope, $http) {

    $scope.oneAtATime = true;
    $http.get("http://www.w3schools.com/angular/customers.php")
    .then(function (response) {$scope.names = response.data.records;});
});

【讨论】：