CODEWITHSUNDEEP
javascripthtmlangularjs
gstyle
gstyle

Reputation: 33

I am making accordion on bootstrap tables with data coming from ng-repeat loop with no ui.bootstrap and no jquery

I tried making a table in which each row is filled with ng-repeat and along with that i want on click of each row a collapsible panel should appear (accordion).But with my code only single row is rendering here is link of my code- 

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>

Upvotes: 0

Views: 958

Answers (1)

N&#39;Bayramberdiyev
N&#39;Bayramberdiyev

Reputation: 3620

Your inital HTML code was invalid. You cannot put a div element inside tbody and tr. You can use separate ng-repeat directives, one for the table and one for the collapsible panels.

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>

Upvotes: 1

Related Questions