How to create a collapse table by using Angualrjs

Question

I am trying to create an Angularjs collapse table with bootstrap, and I found this one Twitter Bootstrap Use collapse.js on table cells [Almost Done] does help me, especially the last comment using Angualrjs method.

However, I found this method doesn't work on my Iphone safari browser but works on android phones. I can't figure out the reason. Here is the example link http://jsfiddle.net/ADukg/6880/ which comes from the post above.

<div ng-controller="UserCtrl">
<h3>Click row to revel last name!</h3>
<table class="table table-condensed">
    <thead>
        <td>First Name</td>
    </thead>

    <tbody ng-repeat="user in users" on-finish-render>
        <tr data-toggle="collapse" data-target="#{{user.id}}">
            <td>{{user.firstName}}</td>
        </tr>
        <tr>
            <td class="hiddenRow">
                <div id="{{user.id}}" class="collapse">
                    <h4>{{user.lastName}}</h4>
                </div>
            </td>
        </tr>
    </tbody>
</table>

score 0 · Answer 1 · edited May 23 '17 at 11:51

Try this instead

<div ng-controller="UserCtrl">
<h3>Click row to revel last name!</h3>
<table class="table table-condensed">
    <thead>
        <td>First Name</td>
    </thead>

    <tbody ng-repeat="user in users" on-finish-render>
        <tr>
            <td><a data-toggle="collapse" data-ng-href="#{{user.id}}" data-target="#{{user.id}}">{{user.firstName}}</a></td>
        </tr>
        <tr>
            <td class="hiddenRow">
                <div id="{{user.id}}" class="collapse">
                    <h4>{{user.lastName}}</h4>
                </div>
            </td>
        </tr>
    </tbody>
</table>

see : bootstrap 3 accordion collapse does not work on iphone

Thank you for you answering, but it still doesn't work for me — Wayne Li, Jul 29 '16 at 14:55

Sibiraj · Answer 2 · 2017-08-23T12:43:00.260

I think you should use ng-repeat-start and ng-repeat-end. native angularjs directives

Check this link https://www.undefinednull.com/2015/04/10/repeating-multiple-elements-using-ng-repeat-start-and-ng-repeat-end-in-angularjs/

also, check this http://johnculviner.com/expandable-collapsable-detail-in-a-table-with-angular-js/

Sample

// Code goes here

var app = angular.module('myApp', []);

app.controller('mainCtrl', function($scope) {
  $scope.people = [{
    name: "Bob",
    gender: "Male",
    details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nisi quis mi tincidunt luctus ut quis nunc. Nam non risus tincidunt risus sodales condimentum. Morbi sed gravida elit. Nunc a turpis vestibulum elit posuere blandit. Phasellus luctus lectus non porta auctor. Etiam pellentesque imperdiet posuere. Nullam adipiscing congue nisl, in vulputate odio ornare ac."
  }, {
    name: "Jane",
    gender: "Female",
    details: "Maecenas quis sodales lectus, vitae convallis ipsum. Ut ac viverra tellus. Quisque vulputate, orci placerat eleifend scelerisque, eros nunc rutrum odio, pharetra mattis leo neque vel eros. Cras id purus nec lorem vehicula rutrum a vel arcu. Quisque eget euismod augue. Integer volutpat auctor lorem, quis lacinia nisl tempus nec. Nunc fringilla, odio eget molestie varius, tortor turpis dignissim lacus, sed varius nunc velit eu turpis. Etiam sed congue diam. In ornare elit nec dolor faucibus ornare. Ut eget erat vel elit tristique iaculis. Maecenas et semper lorem. Nam mollis ante et ipsum vestibulum posuere. Ut non purus non risus tempor vulputate et vitae ipsum. Mauris et sem sit amet quam pulvinar fringilla."
  }, {
    name: "Bill",
    gender: "Male",
    details: "Quisque rhoncus scelerisque sapien, tempor vestibulum dui tincidunt eu. Maecenas scelerisque, dolor sed vehicula pulvinar, ligula erat ornare arcu, in dictum ipsum libero vel est. Donec porttitor venenatis lacus, a laoreet orci. Proin quam mi, ultrices in ullamcorper vel, malesuada suscipit lectus. Nam faucibus commodo quam, auctor vehicula felis condimentum quis. Phasellus tempor molestie enim, at vehicula justo auctor eu. Pellentesque venenatis elit eu malesuada fringilla."
  }];
})

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="script.js"></script>
  <style>
    .button
  </style>
</head>

<body ng-controller="mainCtrl">
  <h1>People and Details</h1>
  <div class="container-fluid">
    <table class="table">
      <thead style="background-color: lightgray;">
        <tr>
          <td style="width: 30px;"></td>
          <td>
            Name
          </td>
          <td>Gender</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="person in people">
          <td>
            <button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
            <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
          </td>
          <td>{{person.name}}</td>
          <td>{{person.gender}}</td>
        </tr>
        <tr ng-if="person.expanded" ng-repeat-end="">
          <td colspan="3">{{person.details}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

plunker for the above code

How to create a collapse table by using Angualrjs

2 Answers2