Guide to building a collapsible table using AngularJS

My goal is to design an Angularjs collapse table with bootstrap, and I stumbled upon a helpful resource titled Twitter Bootstrap Use collapse.js on table cells [Almost Done]. The last comment provided insight using Angularjs method which was quite beneficial.

However, I encountered an issue where this method works perfectly on Android phones but fails to function on my Safari browser on iPhone. Unfortunately, I am unable to determine the cause of this discrepancy. For reference, here is the example link http://jsfiddle.net/ADukg/6880/ derived from the aforementioned post.

<div ng-controller="UserCtrl">
<h3>Click row to reveal 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>

Answer №1

Give this a try instead

<div ng-controller="UserCtrl">
<h3>Click on a row to reveal the 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>

Check out: bootstrap 3 accordion collapse not functioning properly on iPhone

Answer №2

I suggest utilizing the ng-repeat-start and ng-repeat-end directives in AngularJS.

For more information, refer to this URL:

You may also find this link helpful:

Here's a sample code snippet:

// 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..."
  }, {
    name: "Jane",
    gender: "Female",
    details: "Maecenas quis sodales lectus, vitae convallis ipsum..."
  }, {
    name: "Bill",
    gender: "Male",
    details: "Quisque rhoncus scelerisque sapien, tempor vestibulum dui tincidunt eu..."
  }];
})
View plunker demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Spatializing Web Audio through the perspective of view direction

I want to adjust the volume of a sound based on the direction in which the camera is facing in relation to the sound source. When looking directly at the sound, the volume should be at 100%, but as you turn away, it should decrease. Using the built-in dir ...

tips for updating <h1> elements using ghcjs-dom

My experience with the ghcjs and ghcjs-dom documentation has been quite limited. Here is a simple example with basic HTML code: h1 { font-family: Helvetica; } p {font-family: Helvetica; color: blue; } <h1> Hello World </h1> <p> This i ...

Is there a problem with Chrome's display?

I'm currently using Chrome version 53.0.2785.143 and have noticed a rendering issue that tends to occur more frequently within my application when utilizing CSS transform scale. Feel free to check out this JSFiddle link which demonstrates the problem ...

Hidden button trigger is malfunctioning

I am attempting to activate a hidden button, but the event does not seem to be triggering. Here is the code snippet: <div class="dyn-inp-group"> <div class="dyn-inps"> <div class="form-group form-group-options col-xs-12 dyn-inp" ...

Steps for deactivating a button based on the list's size

I am trying to implement a feature where the user can select only one tag. Once the user has added a tag to the list, I want the button to be disabled. My approach was to disable the button if the length of the list is greater than 0, but it doesn't s ...

Utilizing Highcharts for Dynamic Data Loading via AJAX

Just delving into the world of Highcharts and hoping that the issue I'm facing is just a simple oversight on my part. I decided to work off the example provided in the Highcharts live update demo - http://www.highcharts.com/demo/dynamic-update and m ...

Tips for sending information back to the previous screen in React Native Navigation version 5

Recently, I upgraded to react native navigation version 5 and now I am facing an issue with sending data back to the previous screen when making a goBack() call. To navigate to the next view, I use: const onSelectCountry = item => { console.log(it ...

What could be the reason behind the repeated console messages when utilizing jquery to replace the src attribute of images?

Overview: An HTML page with two images, identified as #me1 and #me2 The images initially display 1.jpg and 2.jpg Clicking #me1 triggers a GET request to "randim.php" using jQuery to fetch a random filename, which is then set as the src= attribute ...

Having difficulty managing the responses of two separate <select> elements with images in jQuery

I recently started using online jQuery to manage images within the "select" element of my HTML code. However, I've encountered a problem where events on each individual "select" element are not being separated correctly. var selectedId = ""; ...

Utilizing Vuetify 2 breakpoints in script setup syntax: A beginner's guide

As I access the current Vue instance and retrieve the $vuetify object with all breakpoints and properties, I encounter an issue where the breakpoints do not update when changing the screen size. It seems to lack reactivity. Even after attempting to use co ...

Personalize the color scheme of your HTML template

I recently downloaded a template from html5up.net, specifically the one located here. My intention was to add my own touch by changing the blue color to orange. I managed to do so by tweaking the main.css file and it worked like a charm. However, the res ...

How to make a JQuery list item unselectable when appending it

I encountered a strange issue while using jQuery to append items to a list. <ul id="idNicheItems" class="clScrollItems ui-widget-content ui-corner-all"> <li id="NicheItem_1"> Item 1</li> <li id="NicheItem_2"> Item 2</li& ...

The navigation bar is not showing up at the top of my webpage as expected, instead, it is displaying

1 I attempted to build a model Google site to enhance my HTML and CSS skills, but I encountered an unusual issue where my navigation menu is showing up inside my image div, even though it was created before that. I have given backgrounds to the navs and i ...

Differences Between CSS Media Query 'max-width' and 'width <='In the realm of CSS media queries, there are two common ways to specify

Recently, while working on a website design project, I had the following media query in my codebase: @media only screen and (max-width: 480px) but after introducing Stylelint, it modified the query to: @media only screen and (width <= 480px) During a ...

How can I open a link in a new tab using Angular components?

Currently, I am retrieving a base64 encoded PDF from an API REST service. After some trial and error, I came up with this method for decoding and downloading the PDF: const linkSource = 'data:application/pdf;base64,' + apiResponse; const downloa ...

Unusual default Nav bar positioning

When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...

Update the content of an HTML element without having direct access to the HTML code

I am currently in the process of creating a website using a website builder, and I am interested in customizing the default message that is displayed when a required field in the website form is left empty. The form in question is an integral part of the w ...

Merge two arrays together in Javascript by comparing and pairing corresponding elements

Dealing with two arrays here. One comes from an API and the other is fetched from Firebase. Both contain a common key, which is the TLD as illustrated below. API Array [ { "TLD" : "com", "tld_type": 1, }, "TLD" : "org", "tld_type" : 1, } ] Fi ...

What could be the reason for the failure of background: url(local.png)?

I am facing an issue where the background url() property only seems to work with online stored images. Local stored images do not display when I try to use them. This is my folder structure: index.html src css style.css images background.png profile ...

"Here's a neat trick for assigning the value of a div to a text box without any identifiers like id or

I needed a way to transfer the value of a .item div into an empty textbox without any specific identifier. Then, when the input loses focus, the value should be sent back to the original .item div. $(document).on("click", ".item", function() { $(this) ...