Таблица AngularJS: Сортиране, OrderBy и филтър с главни букви [Примери]

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

Таблиците са един от често срещаните елементи, използвани в HTML при работа с уеб страници.

Таблиците в HTML са проектирани с помощта на HTML тага

  1. етикет – Това е основният етикет, използван за показване на таблицата.
  2. – Този етикет се използва за разделяне на редовете в таблицата.
  3. – Този етикет се използва за показване на действителните данни от таблицата.
  4. – Това се използва за данните в заглавката на таблицата.

Използвайки горните налични HTML тагове заедно с AngularJS, можем да направим по-лесно попълването на данни в таблица. Накратко, директивата ng-repeat се използва за попълване на данни в таблица.

Ще разгледаме как да постигнем това по време на тази глава. Също така ще разгледаме как можем да използваме филтрите за подреждане и главни букви заедно с използването на атрибута $index за показване на индекси на таблици на Angular.

Попълване и показване на данни в таблица

Както обсъдихме във въведението към тази глава, основата за създаване на структурата на таблицата в HTML страница остава същата.

Структурата на таблицата все още се създава с помощта на нормалните HTML тагове на , , и . Данните обаче се попълват чрез използване на директивата ng-repeat в AngularJS.
Нека да разгледаме прост пример за това как можем да внедрим Angular таблици.
В този пример,

Ще създадем ъглова таблица, която ще има теми на курса заедно с техните описания.

Стъпка 1) Първо ще добавим таг „style“ към нашата HTML страница, така че таблицата да може да се показва като правилна таблица.

Попълване и показване на данни в таблица

  1. Тагът стил се добавя към HTML страницата. Това е стандартният начин за добавяне на всички форматиращи атрибути, които са необходими за HTML елементи.
  2. Добавяме две стилови стойности към нашата таблица.
  • Единият е, че трябва да има солидна граница за нашата ъглова таблица и
  • Второ е, че трябва да има подложка, поставена на място за нашите ъглови таблични данни.

Стъпка 2) Следващата стъпка е да напишете кода за генериране на таблицата и нейните данни.

Попълване и показване на данни в таблица

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Обяснение на кода

  1. Първо създаваме променлива, наречена „урок“ и й присвояваме няколко двойки ключ-стойност в една стъпка. Всяка двойка ключ-стойност ще се използва като данни при показване на таблицата. След това променливата на урока се присвоява на обекта на обхвата, така че да може да бъде достъпен от нашия изглед.
  2. Това е първата стъпка в създаването на таблица и ние използваме етикет.
  3. За всеки ред от данни използваме директивата „ng-repeat“. Тази директива преминава през всяка двойка ключ-стойност в обекта на обхвата на урока, като използва променливата ptutor.
  4. И накрая, ние използваме етикет заедно с двойките ключ-стойност (ptutor.Name и ptutor.Description), за да покажете данните от таблицата Angular.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Продукция

Попълване и показване на данни в таблица

От горния резултат,

  • Виждаме, че таблицата се показва правилно с данните от масива от двойки ключ-стойност, дефинирани в контролера.
  • Данните от таблицата бяха генерирани чрез преминаване през всяка от двойките ключ-стойност с помощта на директивата „ng-repeat“.

СВЪРЗАНИ СТАТИИ

Вграден филтър в AngularJS

Много често се използват вградените филтри в AngularJS, за да се промени начина, по който данните се показват в таблиците. Вече видяхме филтри в действие в по-ранна глава. Нека направим кратко обобщение на филтрите, преди да продължим напред.

В Angular.JS филтрите се използват за форматиране на стойността на израза, преди да се покаже на потребителя. Пример за филтър е филтърът „главни букви“, който приема изходен низ и форматира низа и показва всички знаци в низа като главни букви.

Така че в примера по-долу, ако стойността на променливата „TutorialName“ е „AngularJS“, изходът на израза по-долу ще бъде „ANGULARJS“.

{{ TurotialName | uppercase }}

В този раздел ще разгледаме по-подробно как филтрите orderBy и главни букви могат да се използват в таблици.

Таблица за сортиране с филтър OrderBy

Този филтър се използва за сортиране на таблицата въз основа на една от колоните на таблицата. В предишния пример изходът за данните от нашата таблица Angular се появи, както е показано по-долу.

Контрольори Контролери в действие
Модели Модели и обвързващи данни
директиви Гъвкавост на директивите

Нека да разгледаме пример за това как можем да използваме филтъра „orderBy“ и да сортираме данните от таблицата Angular, използвайки първата колона в таблицата.

Таблица за сортиране с филтър OrderBy

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Обяснение на кода

  1. Използваме същия код, както при създаването на нашата таблица, единствената разлика този път е, че използваме филтъра „orderBy“ заедно с директивата ng-repeat. В този случай казваме, че искаме да подредим таблицата по ключа „Име“.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Продукция

Таблица за сортиране с филтър OrderBy

От изхода,

  • Виждаме, че данните в таблицата Angular са сортирани според данните в първата колона. В нашия набор от данни данните „Директиви“ идват от данните „Модели“, но тъй като приложихме филтъра orderBy, таблиците се сортират по съответния начин.

Показване на таблица с филтър за главни букви

Можем също да използваме филтъра за главни букви, за да променим данните в таблицата Angular на главни букви.

Нека да разгледаме пример как можем да постигнем това.

Показване на таблица с филтър за главни букви

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Обяснение на кода

  1. Използваме същия код, както при създаването на нашата таблица, единствената разлика този път е, че използваме филтър с главни букви. Използваме този филтър във връзка с „ptutor.Name“, така че целият текст в първата колона да се показва с главни букви.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Продукция

Показване на таблица с филтър за главни букви

От изхода,

  • Можем да видим, че с помощта на филтъра „главни букви“ всички данни в първата колона се показват с главни букви.

Показване на индекса на таблицата ($index)

За да покажете индекса на таблицата, добавете a с $index.

Нека да разгледаме пример как можем да постигнем това.

Покажете индекса на таблицата

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Обяснение на кода

  1. Използваме същия код, както при създаването на нашата таблица, единствената разлика този път е, че добавяме допълнителен ред към нашата таблица, за да покажем индексната колона. В тази допълнителна колона използваме свойството „$index“ предоставен от AngularJS и след това използване на оператора +1 за увеличаване на индекса за всеки ред.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Продукция

Покажете индекса на таблицата

От изхода,

  • Можете да видите, че е създадена допълнителна колона. В тази колона можем да видим индексите, които се създават за всеки ред.

Oбобщение

  • Структурите на таблиците се създават с помощта на наличните стандартни тагове HTML. Данните в таблицата се попълват с помощта на директивата „ng-repeat“.
  • Филтърът OrderBy може да се използва за сортиране на таблицата въз основа на която и да е колона в нея.
  • Филтърът за главни букви може да се използва за показване на данните във всяка текстова колона с главни букви.
  • Свойството “$index” може да се използва за създаване на индекс за таблицата.
  • Един често срещан проблем, срещан по време на разработката с таблици AngularJS.JS, е внедряването на големи набори от данни, които имат 1000+ реда с данни. Понякога на ng-повтаряне директива може да спре да реагира и следователно цялата страница понякога да не реагира. В такъв случай винаги е по-добре да имате пагинация, при която редовете с данни са разпръснати в множество страници.