角度js中的可折叠数据行

Question

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

代码：

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

优选：

我想在国家/地区拥有名单列表，在扩展后我应该可以看到该国家/地区的名称列表。

Answer 1

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

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

Answer 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;});
});