Using ng-repeat in Angular causes the style of a div to become hidden

Utilizing angular ng-repeat to generate multiple divs, the original template html code is as follows:

<div class="span5 noMarginLeft">

  <div class="dark">

    <h1>Timeline</h1>

    <div class="timeline">
      <div class="timeslot">
        <div class="task">
          <span>
<span class="type">appointment</span>
          <span class="details">
Dennis Ji at Bootstrap Metro Dashboard HQ
</span>
          <span>
remaining time
<span class="remaining">
3h 38m 15s
</span>
          </span>
          </span>
          <div class="arrow"></div>
        </div>
        <div class="icon">
          <i class="icon-map-marker"></i>
        </div>
        <div class="time">
          3:43 PM
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>

and each div's style (class: 'timeslot' or 'timeslot alt') is automatically calculated for its height: https://i.sstatic.net/5djvJ.png

the outcome of the code is: https://i.sstatic.net/KFjHs.png

however, when using ng-repeat to generate these divs, (insert code here)

<div class="timeslot" ng-repeat="comment in allComments">
  <div class="task">
    <span>
<span class="type">{{comment.userId}}}</span>
    <span class="details">
{{comment.content}}
</span>
    <span>
<span class="remaining">
{{comment.dislike}}
</span>
    </span>
    </span>
    <div class="arrow"></div>
  </div>
  <div class="icon">
    <i class="icon-map-marker"></i>
  </div>
  <div class="time">
    3:43 PM
  </div>

</div>

the div's style is lost, and each div's height is not auto-calculated. How can this issue be resolved? Appreciate any help in advance.

htmlcssangularjs

Answer №1

To simplify the calculation process, it is recommended to create a custom directive. Trying to perform this task using jQuery will likely result in encountering the same issue.

 /**
   * Let's create a directive
   */
  angular
    .module('demoApplication')
    .directive('autoHeight', [function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
       //Perform calculations here 
        console.log(element.css('height'));
      }
    };
  }]);

HTML

 <div class="timeslot" ng-repeat="comment in allComments" auto-height>
  <div class="task">
    <span>
      <span class="type">{{comment.userId}}}</span>
      <span class="details">
        {{comment.content}}
      </span>
      <span>
        <span class="remaining">
          {{comment.dislike}}
        </span>
      </span>
    </span>
    <div class="arrow"></div>
  </div>
  <div class="icon">
    <i class="icon-map-marker"></i>
  </div>
  <div class="time">
    3:43 PM
  </div>
</div>

Direct link to functional plunker for directive

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

The integration of <form> with jQuery Ajax error

I have come across this HTML form function FormSubmit (){ $.ajax({ url:'dotar.php', type:'post', data:$('form').serialize(), success:function(){ setTi ...

javascriptjqueryhtmlajax

Is It Possible to Align Text Horizontally within a Box?

Hey everyone! I'm trying to figure out how to display two elements, "1" and "new referral," side by side without the new referral having a green background. Any help would be greatly appreciated. I've shared my HTML and CSS code snippets below. I ...

htmlcss

There was an issue encountered when attempting to access the stackoverflow api

I am currently attempting to retrieve all questions tagged with ipv4 from stackoverflow using the stackoverflow API. However, I encountered the following error message: No 'Access-Control-Allow-Origin' header is present on the requested resource. ...

javascriptangularjs

Steps to display selected value on another page

Presented below is the code snippet: <html> <head> <meta charset="UTF-8"/> </head> <body> <!--Text field area starts here--> <H3>My Surveys </H3> <hr> <br> <br> <br> <ol> < ...

phphtml

What could be causing the position sticky to not function properly in my script?

Can someone help me troubleshoot an issue with the TopOptions image and component sticking to the top of the page? {!categorySearch && ( <div className="max-w-2xl mx-auto z-40 relative overflow-x-hidden font-metropolis_semibold" ...

htmlcsscss-positiontailwind-css

Is there a way to make sure all source code is aligned to the left?

I'm interested in enhancing the appearance of the source code on my WordPress website. Currently, it looks cluttered with unnecessary empty lines and alignment issues. Is there a way to optimize the source code so that everything is left-aligned and ...

phphtmlwordpresscompressionminify

Troubleshooting base href issues in AngularJS routing

For a demonstration, I decided to try out this plunker from a tutorial that showcases tab routing across different pages. After downloading the entire zip file and running it as is (e.g. with all files in the same directory and utilizing CDN links), I enco ...

javascriptangularjs

Issue with ngTable: Error retrieving data for server-side pagination

I am currently working on setting up a server-side table using ng-table. However, I am encountering some issues with the getData function. It keeps giving me errors such as $defer.resolve is not a function or params is not defined. I noticed that I can ac ...

javascriptangularjsngtable

Create shortened class names

Is there a way to abbreviate class names in HTML and CSS files? For example, I currently have the class name: .profile-author-name-upper And I would like to change it to something shorter like: .p-a-n-u or .panu Any suggestions on how to achieve thi ...

htmlcssgruntjscss-selectors

Adjust the color of static hyperlinks based on the background color

Is there a way to dynamically change the color of my fixed side links based on the background color when scrolling? I attempted to use CSS mixed-blend-mode: difference, but it does not provide the level of control I need. Therefore, I am looking to achieve ...

javascripthtmljquerycss

Inject AngularJS variable bindings into the view alongside HTML code

Is it possible to insert HTML markup into an Angular variable? app.js function myController($scope){ $scope.myItem = '<p>' + Example + '</p>'; } index.html <div ng-controller="myController">{{myItem}}</div&g ...

htmlangularjs

Trouble with file binding function in WebApi controller

When attempting to upload files from Angular to .NET Core WebAPI, I encountered an issue with my code: [HttpPost("UploadImage")] public IActionResult UploadImage([FromForm]ICollection<IFormFile> formFiles) { var picture ...

c#angularjsasp.net-web-api.net-core

Choosing multiple options in a select tag leads to an error

I am facing an issue with my array and select multiple fields. I want all the select options to be automatically selected using the array ID when the file is loaded. Here is my array: Array( [0] => 3 [1] => 5 [2] => 9 ) This is what my select ...

phphtml

Incorporate Bootstrap into your Bigcommerce stencil theme for seamless design integration

As a newcomer to BigCommerce's Stencil theme, I am looking for guidance on integrating Bootstrap into the theme for local development. Is it feasible to incorporate custom CSS and JS into the Stencil theme as well? ...

csstwitter-bootstrapthemesbigcommerce

The request to access /test.php has resulted in an error (404) indicating that the file cannot be found

Disclaimer: I am completely new to php. I recently followed a tutorial on creating a php script that captures input from a sign-up page (html) and saves it in a database (mysql/Wamp). However, when I attempted to test the functionality, I encountered the ...

phphtmlmysqlwamp

What techniques does Google use to craft mobile-friendly fixed backgrounds and parallax content within iframes?

Currently, I am working on a test that involves utilizing an intersectionobserver in conjunction with iframe postMessage to adjust the background image in a translate3d manner within the iframe. However, this method is causing significant jitter and potent ...

javascriptcssiframeads

Customize dynamically loaded data via AJAX

I have a webpage that is loading a table from another source. The CSS is working fine, but I am facing an issue editing the table using jQuery when it's loaded dynamically through a script. It seems like my changes are not getting applied because they ...

javascriptjqueryhtmlajax

If the desktop website is zoomed in beyond 150%, it will automatically switch to mobile responsive mode

Whenever the desktop website is zoomed above 150%, it automatically switches to mobile responsive mode. Is there a way to disable this feature? You can find the website in question here: Give it a try by zooming to 150 percent and see for yourself. Appr ...

htmlcsstwitter-bootstrapweb

When using a routerlink in an a tag with Bootstrap 4, the navigation tab functionality may not work as expected

I've been working on bootstrap4 tabs and everything is working smoothly until I add a router link to the anchor tag. Strangely, only the hover effect works in this case. Can anyone help me troubleshoot this issue? Below is my code snippet: <link ...

htmlangularcssbootstrap-4

Tips for sending multiple values to the next page using AngularJS

Hey there, I'm new to AngularJS and currently using Onsen UI in my demo application. I have two pages in my app and I'm trying to pass two values to the next page. I managed to pass one value successfully, but when I attempt to send the second on ...

htmlangularjsonsen-ui