Képes a mesterséges intelligencia egy AngularJS táblát modern Angular táblává alakítani?

A mesterséges intelligencia eszközei az ng-repeat függvényt vezérlőfolyamat-blokkként írják át, és a szűrőket pipe-okba vagy jelekbe helyezik át. Mivel az Angular nem rendelkezik beépített orderBy vagy filter pipe-pal, minden generált rendezést és keresést manuálisan kell ellenőrizni.

AngularJS tábla: Rendezés orderBy és nagybetűs szűrővel

⚡ Okos összefoglaló

Az AngularJS táblázatok rendezése, sorba rendezése és szövegformázása mind az ng-repeat direktívára és egy filter kifejezésre támaszkodik. Ez az oldal bemutatja, hogyan alakít át egy egyszerű HTML táblázatot élő, adatvezérelt ráccsá.

🧱 Szerkezet: A table, tr, td és th tagek továbbra is építik a rácsot, így egyetlen AngularJS-specifikus jelölőkód sem helyettesíti a standard HTML-t.
🔁 Népesség: Az ng-repeat direktíva végigmegy egy tömbön a scope objektumon, és minden megtalált elemhez egy sort generál.
↕️ Sorrend: Az orderBy szűrő tetszőleges kulcs szerint rendezi a sorokat, és egy fordított jelző igény szerint megfordítja az irányt.
🔤 Formázás: A nagybetűs szűrő egyetlen oszlopot ír nagybetűsre anélkül, hogy megváltoztatná a vezérlőben található mögöttes adatokat.
???? Keresés: Az ng-modell bemenetéhez kötött szűrő szűkíti a látható sorokat, miközben az olvasó gépel.
🔢 számozás: Az $index tulajdonság egy nulla alapú számlálót biztosít, így az egyes hozzáadása olvasható sorszámot eredményez.
🚀 Skála: Ezer soron túl párosítsa a limitTo-t a lapozással és track által, hogy az oldal reszponzív maradjon.

További információk

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

Táblázatok HTML 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 érhető el ez. Azt is megvizsgáljuk, hogyan használhatjuk az orderBy és a nagybetűs szűrőket, valamint az $index attribútumot az AngularJS táblaindexek megjelenítéséhez. Az első lépés maga a jelölés.

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 implementálhatunk AngularJS táblákat.
Ebben a példában

Létrehozunk egy AngularJS táblázatot, amely a kurzusok témáit és azok leírását tartalmazza.

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 az, hogy az AngularJS táblázatunknak tömör szegélynek kell lennie, és
Másodszor, hogy az AngularJS táblaadatainkhoz kitöltést kell beállítani.

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>

⚠️ Figyelmeztetés: Ez a lista pontosan úgy szerepel a cikkben, ahogyan megjelent, és négy sor hibás. chrset helyesírási hibák charsetHárom AngularJS build töltődik be egyszerre, ami eggyel több. lib/bootstrap.js és a lib/bootstrap.css nem léteznek. Tartsa meg angular.min.js csak.

Code 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) az AngularJS tá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.

A nyers sorok csak kiindulópontot jelentenek, mivel a szűrők döntik el, hogyan rendeződnek és formázódnak ezek a sorok.

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 AngularJS-ben a szűrőket a kifejezés értékének formázására használják, mielőtt az megjelenne a felhasználónak. Egy példa a szűrőre a „nagybetűs” szűrő, amely egy karakterlánc kimenetét veszi alapul, 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ázatokkal használt gyakori AngularJS szűrők

Az alábbi táblázat összehasonlítja az ng-repeat kifejezéseken belül leggyakrabban használt szűrőket.

Szűrő	Cél	Példa
rendelés szerint	Kulcs szerint rendezi a sorokat	`\| orderBy : 'Name'`
szűrő	Megtartja az egyező sorokat	`\| filter : searchText`
nagybetűs	Nagybetűs szöveg	`\| uppercase`
kisbetűs	Lejjebb teszi a szöveget	`\| lowercase`
korlát	Sorok száma a Caps-ben	`\| limitTo : 25`
valuta	Formátumok pénzt	`\| currency : '$'`
adat	Dátumformátumok	`\| date : 'dd MMM yyyy'`
szám	Tizedesjegyek beállítása	`\| number : 2`

A rendezés az a szűrő, amit az olvasók először kérnek, így az orderBy szűrő következik.

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

Ez a szűrő a táblázat egyik oszlopa alapján rendezi a táblázatot. Az előző példában az AngularJS tá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 AngularJS tábla adatait a tábla első oszlopa alapján.

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

Code 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 AngularJS tábla adatai az első oszlopban lévő adatok szerint vannak rendezve. A tömb a Controllers (vezérlők), Models (modellek), Directives (irányelvek) sorrendben van deklarálva, így szűrő nélkül a sorok ebben a sorrendben jelennek meg. Alkalmazás orderBy : 'Name' A Name értékeket ábécé sorrendbe rendezi, ami a direktívákat a modellek elé helyezi, és vezérlőket, direktívákat, modelleket hoz létre.

Rendezés Reverse és a Feladó oszlopfejlécek

Az orderBy szűrő elfogad egy második argumentumot. true megfordítja az irányt, és a kulcs és a jelző hatókörben történő tárolása lehetővé teszi az olvasó számára, hogy a fejlécre kattintva újra rendezze a táblázatot, ahogyan a megrendelésReferencia alapján körülír.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

A rendezés megváltoztatja a sorok sorrendjét. A következő szűrő megváltoztatja az egyes oszlopok olvasásának módját.

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

A nagybetűs szűrőt is használhatjuk az AngularJS tábla adatainak nagybetűssé alakítására.

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>

Code 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.

Az oszlopok formázása hasznos, és az olvasók gyakran szeretnék, ha egy sorszám is szerepelne mellettük.

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>

Code 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.

Három sor fér el egy képernyőn. Egy realisztikus adathalmaz nem, ezért az olvasóknak szükségük van egy módszerre a kereséshez.

AngularJS táblaadatok szűrése és keresése

Az AngularJS egy nevű szűrőt szállít filterAz ng-repeat után elhelyezve a tömb minden elemét összehasonlítja egy értékkel, és csak az egyező sorokat tartja meg. Ha ezt az értéket egy szövegdobozhoz köti az ng-model segítségével, a táblázat szűkül, miközben az olvasó gépel, eseménykezelő és vezérlőkód nélkül.

Élő keresés hozzáadása Box

Adj hozzá egy bemenetet a táblázat fölé, és irányítsd át a tömböt a szűrőn. A kettő ugyanazzal a scope tulajdonsággal rendelkezik, így az AngularJS minden billentyűleütésnél újraértékeli a kifejezést.

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Magyarázat:

A bemenet kiírja azt, amit beírunk. searchText a hatókörön.
filter : searchText megőrzi a sorokat, amelyek neve vagy DescriptAz ion tartalmazza ezt a karakterláncot, a kis- és nagybetűk figyelmen kívül hagyásával.
Ha egyetlen oszlopban szeretne keresni, adjon át egy objektumot: filter : {Name : searchText}.
Szűrőlánc, tehát | filter : searchText | orderBy : 'Name' először átkutatja, majd szétválogatja a túlélőket.

Tartsa a nagy táblázatokat reszponzívan

Az AngularJS táblákkal való fejlesztés során felmerülő egyik gyakori probléma egy ezer vagy több sort tartalmazó nagy adathalmaz. ng-ismétlés Az utasítás soronként egy hatókört és egy figyelőt hoz létre, így az oldal leállhat. Ehelyett terítse szét a sorokat az oldalak között, és adja hozzá a következőt: track by így a meglévő sorokat újrahasznosítják, ahelyett, hogy újraépítenék.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

GYIK

Az ng-repeat minden sorhoz egyedi kulcsot igényel. Két azonos érték duplikált hibát okoz. Adjon hozzá egy különálló tulajdonságot, vagy írja be track $index szerint, így a sor pozíciója lesz a kulcs az értéke helyett.

Igen. Adjon át egy kulcstömböt, például orderBy : ['Name','Description']. Az AngularJS az első kulcs alapján rendez, majd megszakítja a másodikkal való rendezést. A kulcs elé mínuszjelet írva megfordíthatja az adott kulcsot.

Minden ng-repeat sor tartalmazza a $even és $odd logikai értékeket. Kösd az egyiket az ng-class vagy ng-if függvénnyel egy háttérszín alkalmazásához, ami csíkos sorokat hoz létre anélkül, hogy bármilyen extra CSS szelektor lenne a táblázatban.

Az olyan asszisztensek, mint pl. GitHub másodpilóta gyorsan felépítik az ng-repeat jelölést, mégis szkriptútvonalakat és elgépelési attribútumokat találnak ki. Minden javaslatot ellenőriznek a AngularJS szűrőreferencia hajó előttping.

A mesterséges intelligencia eszközei átírják az ng-repeat-et vezérlőfolyamat-blokkként, és a szűrőket pipe-okba vagy jelekbe helyezik át. Mivel szögletes Nincs beépített orderBy vagy szűrőpipe, minden generált rendezést és keresést manuálisan kell ellenőrizni.

AngularJS tábla: Rendezés orderBy és nagybetűs szűrővel

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

Code Magyarázat

teljesítmény

AngularJS beépített szűrő

Táblázatokkal használt gyakori AngularJS szűrők

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

Code Magyarázat

teljesítmény

Rendezés Reverse és a Feladó oszlopfejlécek

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

Code Magyarázat

teljesítmény

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

Code Magyarázat

teljesítmény

AngularJS táblaadatok szűrése és keresése

Élő keresés hozzáadása Box

Tartsa a nagy táblázatokat reszponzívan

GYIK

Foglald össze ezt a bejegyzést a következőképpen:

Iratkozzon fel a hírlevélre

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

Code Magyarázat

teljesítmény

AngularJS beépített szűrő

Táblázatokkal használt gyakori AngularJS szűrők

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

Code Magyarázat

teljesítmény

Rendezés Reverse és a Feladó oszlopfejlécek

KAPCSOLÓDÓ CIKKEK

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

Code Magyarázat

teljesítmény

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

Code Magyarázat

teljesítmény

AngularJS táblaadatok szűrése és keresése

Élő keresés hozzáadása Box

Tartsa a nagy táblázatokat reszponzívan

GYIK

Foglald össze ezt a bejegyzést a következőképpen:

Iratkozzon fel a hírlevélre