AngularJS táblázat: Rendezés, Rendezés és nagybetűs szűrő [Példák]

A táblázatok az egyik leggyakrabban használt elem a HTML-ben, amikor weboldalakkal dolgozunk.

A HTML-táblázatokat a HTML-címke használatával tervezték

tag – Ez a fő címke a táblázat megjelenítéséhez.
– Ez a címke a táblázaton belüli sorok elkülönítésére szolgál.
– Ez a címke a tényleges táblázatadatok megjelenítésére szolgál.
– Ez a táblázat fejléc adataihoz használatos.

A fenti elérhető HTML-címkék használatával együtt AngularJS, megkönnyíthetjük a táblaadatok feltöltését. Röviden, az ng-repeat direktíva a táblázat adatainak kitöltésére szolgál.

Ebben a fejezetben megvizsgáljuk, hogyan érhetjük el ezt. Azt is megvizsgáljuk, hogyan használhatjuk az orderby és a nagybetűs szűrőket, valamint az $index attribútumot a szögtábla indexek megjelenítéséhez.

Adatok feltöltése és megjelenítése táblázatban

Amint azt a fejezet bevezetőjében tárgyaltuk, a HTML-oldalon a táblázatstruktúra létrehozásának alapja ugyanaz marad.

A táblázat szerkezete továbbra is a normál HTML címkék használatával jön létre , , és . Az adatok azonban az AngularJS ng-repeat direktívájával vannak feltöltve.
Nézzünk egy egyszerű példát arra, hogyan valósíthatunk meg Angular táblázatokat.
Ebben a példában

Létrehozunk egy Angular táblázatot, amelyben a kurzusok témái és leírásai lesznek.

Step 1) Először egy "style" címkét adunk a HTML oldalunkhoz, hogy a táblázat megfelelő táblázatként jelenjen meg.

A stíluscímke hozzáadódik a HTML-oldalhoz. Ez a szabványos módja a HTML elemekhez szükséges formázási attribútumok hozzáadásának.
Két stílusértéket adunk a táblázatunkhoz.

Az egyik, hogy legyen szilárd szegély az Angular asztalunknak és
Másodszor, hogy az Angular táblázat adataihoz kitöltést kell beépíteni.

Step 2) A következő lépés a kód megírása a tábla és az adatok létrehozásához.

<!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>

Kód Magyarázat

Először létrehozunk egy „oktatóanyag” nevű változót, és egy lépésben hozzárendelünk néhány kulcs-érték párhoz. A táblázat megjelenítésekor minden kulcs-érték pár adatként fog szerepelni. Az oktatóanyag-változó ezután hozzá van rendelve a hatókör objektumhoz, hogy az elérhető legyen a nézetünkből.
Ez a táblázat létrehozásának első lépése, és a címke.
Minden adatsorhoz az „ng-repeat direktívát” használjuk. Ez a direktíva a ptutor változó használatával végigmegy az oktatói hatókör objektumban minden kulcs-érték páron.
Végül a címkét a kulcs-érték párokkal együtt (ptutor.Name és ptutor.Description) a szögtábla adatainak megjelenítéséhez.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

teljesítmény

A fenti kimenetből

Láthatjuk, hogy a táblázat megfelelően jelenik meg a vezérlőben definiált kulcs-érték párok tömbjének adataival.
A táblázat adatait úgy állítottuk elő, hogy az „ng-repeat direktíva” segítségével végigmentek az egyes kulcs-érték párokon.

AngularJS beépített szűrő

Nagyon gyakori, hogy az AngularJS beépített szűrőit használják az adatok táblázatokban való megjelenítésének megváltoztatására. Egy korábbi fejezetben már láthattuk működés közben a szűrőket. Mielőtt továbblépnénk, röviden összefoglaljuk a szűrőket.

Az Angular.JS-ben szűrőket használnak a kifejezés értékének formázására, mielőtt az megjelenik a felhasználó számára. A szűrőre példa a „nagybetűs” szűrő, amely karakterlánc-kimenetet vesz fel, és formázza a karakterláncot, és a karakterlánc összes karakterét nagybetűként jeleníti meg.

Tehát az alábbi példában, ha a 'TutorialName' változó értéke 'AngularJS', akkor az alábbi kifejezés kimenete 'ANGULARJS' lesz.

Ebben a részben részletesebben megvizsgáljuk, hogyan használhatók az orderBy és a nagybetűs szűrők a táblázatokban.

Táblázat rendezése Rendezés szerint szűrővel

Ez a szűrő a táblázatok valamelyik oszlopa alapján történő rendezésére szolgál. Az előző példában a szögtáblázat adatainak kimenete az alábbiak szerint jelent meg.

Vezérlők	A vezérlők működés közben
Modellek	Modellek és kötési adatok
Irányelvek	Az irányelvek rugalmassága

Nézzünk egy példát arra, hogyan használhatjuk az „orderBy” szűrőt, és hogyan rendezhetjük az Angular tábla adatait a táblázat első oszlopában.

<!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>

Kód Magyarázat

Ugyanazt a kódot használjuk, mint a táblázat elkészítéséhez, az egyetlen különbség ezúttal az, hogy az „orderBy” szűrőt az ng-repeat direktívával együtt használjuk. Ebben az esetben azt mondjuk, hogy a „Név” billentyűvel szeretnénk az asztalt rendezni.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

teljesítmény

A kimenetből,

Láthatjuk, hogy az Angular tábla adatai az első oszlop adatai szerint lettek rendezve. Adatkészletünkben a „Directives” adatok a „Models” adatokból származnak, de mivel az orderBy szűrőt alkalmaztuk, a táblák ennek megfelelően lesznek rendezve.

Táblázat megjelenítése nagybetűs szűrővel

A nagybetűs szűrővel az Angular tábla adatait is nagybetűsre változtathatjuk.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

<!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>

Kód Magyarázat

Ugyanazt a kódot használjuk, mint a táblázat elkészítéséhez, az egyetlen különbség ezúttal az, hogy a nagybetűs szűrőt használjuk. Ezt a szűrőt a „ptutor.Name”-vel együtt használjuk, így az első oszlopban lévő összes szöveg nagybetűvel fog megjelenni.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

teljesítmény

A kimenetből,

Láthatjuk, hogy a „nagybetűs” szűrő használatával az első oszlopban lévő összes adat nagybetűs karakterekkel jelenik meg.

A táblázat indexének megjelenítése ($index)

A táblázat indexének megjelenítéséhez adja hozzá a $indexszel.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

<!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>

Kód Magyarázat

Ugyanazt a kódot használjuk, mint a táblázat létrehozásánál, az egyetlen különbség ezúttal az, hogy egy további sort adunk a táblázatunkhoz az index oszlop megjelenítéséhez. Ebben a további oszlopban a „$index” tulajdonságot használjuk. az AngularJS által biztosított, majd a +1 operátor használatával növelheti az indexet az egyes sorokhoz.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

teljesítmény

A kimenetből,

Láthatja, hogy egy további oszlop jött létre. Ebben az oszlopban láthatjuk az egyes sorokhoz készülő indexeket.

Összegzésként

A táblázatszerkezetek a benne elérhető szabványos címkék használatával jönnek létre HTML. A táblázatban szereplő adatok az „ng-repeat” direktívával vannak feltöltve.
Az orderBy szűrővel a táblázat bármely oszlopa alapján rendezhető a táblázat.
A nagybetűs szűrővel bármely szöveges oszlopban lévő adatok nagybetűvel jeleníthetők meg.
A „$index” tulajdonság használható index létrehozására a táblához.
Az AngularJS.JS táblák fejlesztése során az egyik gyakori probléma a nagy adatkészletek megvalósítása, amelyek több mint 1000 adatsort tartalmaznak. Néha a ng-ismétlés direktíva nem válaszolhat, és ezért időnként az egész oldal nem válaszol. Ilyen esetben mindig jobb, ha olyan oldalszámozást alkalmazunk, amelyben az adatsorok több oldalon vannak elosztva.

Talán tetszene:

Adatok feltöltése és megjelenítése táblázatban

Kód Magyarázat

teljesítmény

KAPCSOLÓDÓ CIKKEK

AngularJS beépített szűrő

Táblázat rendezése Rendezés szerint szűrővel

Kód Magyarázat

teljesítmény

Táblázat megjelenítése nagybetűs szűrővel

Kód Magyarázat

teljesítmény

A táblázat indexének megjelenítése ($index)

Kód Magyarázat

teljesítmény

Összegzésként