Показывать загрузку / прогресс / счетчик на таблице во время загрузки данных

Есть таблица, которая заполняется ng_repeat, я собираюсь показать на ней загрузку / прогресс / счетчик во время загрузки данных.

 <div class = "panel-body panel-success">

                <div class = "col-lg-12">
                    <table class = "table table-bordered" >
                        <tr>
                            <th>Name</th>
                            <th>Family</th>
                            <th>Age</th>

                        </tr>
                        <tr ng-repeat = "r in results  track by r.ID">
                            <td>
                                {{r.Name}}
                            </td>
                            <td>
                                {{r.Family}}
                            </td>
                            <td>
                                {{r.Gender}}
                            </td>

                        </tr>
                        <tfoot>
                            <tr>
                                <td align = "center" colspan = "8">
                                    <div class = "pull-center">
                                        <ul uib-pagination total-items = "totalCount" ng-change = "pageChanged()"
                                            items-per-page = "pageSizeSelected"
                                            direction-links = "true" ng-model = "pageIndex"
                                            max-size = "maxSize"
                                            class = "pagination"
                                            boundary-links = "true"
                                            rotate = "false" num-pages = "numPages"></ul>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

Как можно показать загрузку / прогресс / счетчик внутри таблицы при загрузке данных? Я хочу показать счетчик внутри таблицы (вместо строк я имею в виду сохранить имя столбца таблицы)

Как загружаются данные? AJAX?

— 18.12.2018 11:51

@ChrisG да, используя AJAX

— 18.12.2018 12:02

Возможный дубликат Как добавить счетчик при загрузке контента в AngularJS?

— 18.12.2018 12:06

javascript angularjs

18.12.2018 11:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

950

Ответы 1

Показывать счетчик, пока данные не загружены ... после загрузки скрыть его !!

<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app = "soQuestion">
  <div class = "panel-body panel-success" ng-controller = "soController">
{{results.length}}
    <div class = "col-lg-12">
      <table class = "table table-bordered">
        <tr>
          <th>Name</th>
          <th>Family</th>
          <th>Age</th>
        </tr>
          <tr ng-if = "results.length<1">
            <td>
              //insert the spinner image here
            </td>
            <td>
              //insert the spinner image here
            </td>
            <td>
              //insert the spinner image here
            </td>

          </tr>
        

        <ng-container ng-if = "results.length>0">
          <tr ng-repeat = "r in results  track by r.ID">
            <td>
              {{r.Name}}
            </td>
            <td>
              {{r.Family}}
            </td>
            <td>
              {{r.Gender}}
            </td>

          </tr>
        </ng-container>


        <tfoot>
          <tr>
            <td align = "center" colspan = "8">
              <div class = "pull-center">
                <ul uib-pagination total-items = "totalCount" ng-change = "pageChanged()" items-per-page = "pageSizeSelected" direction-links = "true" ng-model = "pageIndex" max-size = "maxSize" class = "pagination" boundary-links = "true" rotate = "false" num-pages = "numPages"></ul>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

Хороший ответ. Остается только сбросить results перед началом новой выборки данных. Другой счетчик будет отображаться только в первый раз.

— 18.12.2018 12:00

Ага. Это потребуется, если вы планируете получать и заполнять данные более одного раза. Удачи :)

— 18.12.2018 12:09

@AIqbalRaj Я хочу показать счетчик внутри таблицы (вместо строк я имею в виду сохранить имя столбца таблицы)

— 18.12.2018 12:27

Я пойду с colspan на td, чтобы у меня был только один спиннер для всего ряда

— 19.12.2018 10:55

18.12.2018 11:57