Я делаю аккордеон на bootstrap таблицах с данными, поступающими из ng-repeat l oop без пользовательского интерфейса. bootstrap и без jquery - PullRequest
Новая
       0

Я делаю аккордеон на bootstrap таблицах с данными, поступающими из ng-repeat l oop без пользовательского интерфейса. bootstrap и без jquery

0 голосов
/ 18 марта 2020

Я попытался создать таблицу, в которой каждая строка заполняется с помощью ng-repeat, и наряду с этим я хочу, чтобы при щелчке каждой строки должна отображаться складная панель (аккордеон). Но с моим кодом отображается только одна строка, здесь ссылка моего кода- 

var app = angular.module('ngapp', []);
app.controller('mainctrl', function($scope) {
  $scope.awesomeThings = [{
    item: 'heoj'
  }, {
    item: 'nniothing'
  }, {
    item: 'skgjs'
  }, {
    item: 'nothing is valued here'
  }];
  $scope.show = [];
  $scope.print = function($event, ind) {
    var el = angular.element('.panel-collapse');
    el.collapse('hide');
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<body ng-app="ngapp" ng-controller="mainctrl">
  <table class="table table-responsive table-hover table-striped">
    <thead>
      <tr style="background-color: lavender;">
        <td>Name</td>
        <td>Product</td>
        <td>Age</td>
        <td>Condition</td>
        <td>234</td>
        <td>23</td>
        <td>34</td>
      </tr>
    </thead>
    <tbody id="accordion" class="panel-group">
      <tr ng-repeat="product in awesomeThings" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)">
        <td>{{$index+1}}</td>
        <td></td>
        <td>{{product.item}}</td>
        <td>{{product.item}}</td>
        <td>
          23
        </td>
        <td>few</td>
      </tr>
    </tbody>
  </table>
</body>

1 Ответ

0 голосов
/ 18 марта 2020

Ваш начальный HTML код неверен. Вы не можете поместить элемент div внутрь tbody и tr. Вы можете использовать отдельные директивы ng-repeat, одну для таблицы и одну для складных панелей. 

const app = angular.module('ngapp',[]);
app.controller('mainctrl', function ($scope) {
    $scope.awesomeThings = [
        { item:'Item1' },
        { item:'Item2' },
        { item:'Item3' },
        { item:'Item4' },
    ];
    $scope.show = [];
    $scope.print = function ($event, ind) {
        let el = angular.element('.panel-collapse');
        el.collapse('hide');
    };
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>

<body ng-app="ngapp" ng-controller="mainctrl">
   <table class="table table-responsive table-hover table-striped">
        <thead>
            <tr style="background-color: lavender;">
                <td>Name</td>
                <td>Product</td>
                <td>Age</td>
                <td>Condition</td>
                <td>234</td>
                <td>23</td>
                <td>34</td>
            </tr>
        </thead>
        <tbody id="accordion" class="panel-group">
            <tr ng-repeat-start="product in awesomeThings" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" > 
                <td>{{ $index + 1 }}</td>
                <td></td>
                <td>{{ product.item }}</td>
                <td>{{ product.item }}</td>
                <td>23</td>
                <td>few</td>
                <td>ghj</td>
            </tr>
            <tr ng-repeat-end="" id="collapse{{$index+1}}" class="panel-collapse collapse">
                <td colspan="9">
                    <div class="panel-body">
                        Item {{ $index + 1 }}: {{ product.item }}
                    </div> 
                </td>
            </tr>
        </tbody>
    </table>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...