Рубрики

Как напечатать массив в табличном формате, используя angularJS?

В JavaScript данные могут храниться в виде массивов. Каждый из элементов массива имеет уникальную индексацию, начиная с 0. Но что, если разработчик захочет отобразить все элементы массива на веб-странице. Один из возможных способов — запустить цикл, начиная с 0 до значения (array.length () — 1) . Однако это невозможно при работе с данными JSON, где может существовать другой массив внутри уже существующего массива.

Наилучшее возможное решение для этого было предоставлено AngularJS.
Массив может быть напечатан в табличном формате, используя директиву 'ng-repeat' AngularJS.
'ng-repeat' помогает в циклическом просмотре элементов в элементе коллекции. Эта директива очень полезна при работе с коллекцией объектов.

Пример 1:

<!DOCTYPE html>

<html>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

  </script>

<style>

    body {

        margin: 2%;

        font-size: 120%;

    }

      

    th,

    td {

        padding: 20px;

    }

</style>

  

<body ng-app="myApp" ng-controller="ListController">

    <h1>Most Grand Slam Winners - Men Tennis</h1>

    <table border=1>

        <thead>

            <tr>

                <th>S.No</th>

                <th>Name</th>

                <th>Country</th>

                <th>Grand Slams</th>

                <th>Active</th>

            </tr>

        </thead>

        <tr ng-repeat="item in itemsDetails">

            <td> {{item.sno}} </td>

            <td> {{item.name}} </td>

            <td> {{item.country}} </td>

            <td> {{item.grandslams}} </td>

            <td> {{item.active}} </td>

        </tr>

    </table>

  

</body>

<script>

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

    app.controller(

      'ListController', function($scope) {

  

        $scope.itemsDetails = [{

                sno: 1,

                name: 'Roger Federer',

                country: 'Switzerland',

                grandslams: 20,

                active: "Yes",

            }, {

                sno: 2,

                name: 'Rafael Nadal',

                country: 'Spain',

                grandslams: 18,

                active: "Yes",

            }, {

                sno: 3,

                name: 'Novak Djokovic',

                country: 'Serbia',

                grandslams: 16,

                active: "Yes",

            }, {

                sno: 4,

                name: 'Pete Samprass',

                country: 'USA',

                grandslams: 14,

                active: "No",

            }, {

                sno: 5,

                name: 'Roy Emerson',

                country: 'Australia',

                grandslams: 12,

                active: "No",

            }

  

        ];

  

    });

</script>

  

</html>

Выход

Объяснение кода:
'Ng-app' и 'ng-controller' этого приложения были названы 'myApp' и 'ListController' соответственно.
В <script> был создан массив с именем 'itemsDetails', который был сохранен в переменной области видимости. Массив содержит список «Топ 5 победителей Большого шлема в мужском теннисе».

Основная задача — распечатать данные этого массива в табличном формате.
Первым шагом является создание таблицы с использованием тегов 'table' , 'thead' , 'tr' , 'td' . Заголовки таблицы установлены. Служба ng-repeat для AngularJS для извлечения нескольких записей из массива.

Основной синтаксис 'ng-repeat':

<div ng-repeat="x in list">
      {{x}}
</div>

В этом примере синтаксис был изменен как элемент ng-repeat = ”в itemsDetails . Следовательно, каждый элемент itemsDetails будет идентифицирован как item . Точечная нотация JavaScript будет использоваться для доступа к информации внутри массива. Например, для доступа к информации, хранящейся в «name» , будет использоваться точечная нотация «itemsDetails.name» . Следующий шаг — написать эту точечную запись, например, в двойных скобках {{}} ; {{itemsDetails.name}} . Затем AngularJS разрешает это выражение и возвращает желаемый результат.

'Ng-repeat' будет запускать этот процесс в цикле, пока все элементы массива не будут выбраны и возвращены в табличном формате.

Пример 2:

<!DOCTYPE html>

<html>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

  </script>

    

<style>

    body {

        margin: 2%;

        font-size: 120%;

    }

      

    th,

    td {

        padding: 20px;

    }

</style>

  

<body ng-app="myApp" ng-controller="ListController">

    <h1>Superheroes and their Universe</h1>

    <table border=1>

        <thead>

            <tr>

                <th>Name</th>

                <th>Universe</th>

            </tr>

        </thead>

        <tr ng-repeat="item in itemsDetails">

            <td> {{item.name}} </td>

            <td> {{item.universe}} </td>

        </tr>

    </table>

  

</body>

<script>

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

    app.controller('ListController', function($scope) {

  

        $scope.itemsDetails = [{

                name: 'Batman',

                universe: 'DC',

            }, {

                name: 'Ant Man',

                universe: 'Marvel',

            }, {

                name: 'Superman',

                universe: 'DC',

            }, {

                name: 'Captain America',

                universe: 'Marvel',

            }, {

                name: 'Thor',

                universe: 'Marvel',

            }

  

        ];

  

    });

</script>

  

</html>

Выход:

Объяснение кода:
Этот пример очень похож на предыдущий. В этом случае мы создали массив и назвали его itemsDetails . Мы будем хранить этот массив в объекте видимости. Сервис 'ng-repeat' будет перебирать массив, получать по одному элементу за раз из массива и затем отображать его на веб-странице в табличном формате.

Рекомендуемые посты:

Как напечатать массив в табличном формате, используя angularJS?

0.00 (0%) 0 votes