AngularJS-tabell: Sortera, ordna efter & Huvudfilter (exempel)

Låt oss titta på ett enkelt exempel på hur vi kan implementera vinkeltabeller.

I detta exempel,

Vi ska skapa en vinkeltabell som kommer att ha kursämnen tillsammans med deras beskrivningar.

Steg 1) Vi ska först lägga till en "stil" -tagg på vår HTML-sida så att tabellen kan visas som en korrekt tabell.

1. Style-taggen läggs till på HTML-sidan. Detta är det vanliga sättet att lägga till alla formateringsattribut som krävs för HTML-element.
2. Vi lägger till två stilvärden i vårt bord.

• En är att det borde finnas en solid gräns för vårt kantiga bord och
• För det andra är det att det ska finnas stoppning för våra vinklade tabelldata.

Steg 2) Nästa steg är att skriva koden för att generera tabellen och dess data.

Guru99 Global Event


{{ptutor.Name}}
{{ptutor.Description}}

Kodförklaring:

1. Vi skapar först en variabel som kallas "tutorial" och tilldelar den några nyckel-värdepar i ett steg. Varje nyckel-värdepar kommer att användas som data när tabellen visas. Självstudievariabeln tilldelas sedan scope-objektet så att det kan nås från vår syn.
2. Detta är det första steget i att skapa en tabell, och vi använder taggen .
   För varje rad med data använder vi "ng-repeat-direktivet". Detta direktiv går igenom varje nyckel-värdepar i tuto, rial scope-objektet med hjälp av variabeln ptutor.
   Slutligen använder vi taggen

   tillsammans med nyckel-värde-paren (ptutor.Name och ptutor.Description) för att visa data för vinkeltabellen. Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren. Produktion: Från ovanstående utdata, Vi kan se att tabellen visas korrekt med data från den uppsättning nyckel-värdepar som definierats i styrenheten. Tabelldata genererades genom att gå igenom vart och ett av nyckel-värdeparen med hjälp av "ng-repeat-direktivet". AngularJS inbyggt filter Det är väldigt vanligt att använda de inbyggda filtren i AngularJS för att ändra hur data visas i tabellerna. Vi har redan sett filter i aktion i ett tidigare kapitel. Låt oss ta en snabb sammanfattning av filter innan vi fortsätter. I Angular.JS-filter används formatet för uttrycksvärdet innan det visas för användaren. Ett exempel på ett filter är 'versaler' som tar på sig en strängutmatning och formaterar strängen och visar alla tecken i strängen som versaler. Så i exemplet nedan, om värdet på variabeln 'TutorialName' är 'AngularJS', kommer utmatningen från nedanstående uttryck att vara 'ANGULARJS'. {{TurotialName | versaler}} I det här avsnittet kommer vi att titta på hur orderBy- och versaler kan användas mer detaljerat i tabeller. Sortera tabell med OrderBy Filter Detta filter används för att sortera tabellen baserat på en av tabellkolumnerna. I det föregående exemplet visades resultatet för våra vinklade tabelldata enligt nedan. Kontroller Kontroller i aktion Modeller Modeller och bindande data Direktiv Direktivens flexibilitet Låt oss titta på ett exempel på hur vi kan använda "orderBy" -filtret och sortera Angular-tabelldata med den första kolumnen i tabellen. Guru99 Global Event {{ptutor.Name}} {{ptutor.Description}} Kodförklaring: Vi använder samma kod som vi gjorde för att skapa vår tabell, den enda skillnaden den här gången är att vi använder "orderBy" -filtret tillsammans med ng-repeat-direktivet. I det här fallet säger vi att vi vill beställa bordet med nyckeln "Namn". Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren. Produktion: Från produktionen, Vi kan se att data i vinkeltabellen har sorterats enligt uppgifterna i den första kolumnen. I vår dataset kommer "Direktiv" -data från "Modeller" -data, men eftersom vi använde orderBy-filtret sorteras tabellerna därefter. Visa tabell med versaler Vi kan också använda versaler för att ändra data i vinkeltabellen till versaler. Låt oss titta på ett exempel på hur vi kan uppnå detta. Guru99 Global Event {{ptutor.Name | uppercase}} {{ptutor.Description}} Kodförklaring: Vi använder samma kod som vi gjorde för att skapa vår tabell, den enda skillnaden den här gången är att vi använder versaler. Vi använder detta filter i kombination med "ptutor.Name" så att hela texten i den första kolumnen visas i versaler. Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren. Produktion: Från produktionen, Vi kan se att med hjälp av "versaler" -filtret visas alla data i den första kolumnen med versaler. Visa tabellindex ($ index) För att visa tabellindexet, lägg till ett

   med $ index. Låt oss titta på ett exempel på hur vi kan uppnå detta. Guru99 Global Event {{$index + 1}} {{ptutor.Name}} {{ptutor.Description}} Kodförklaring: Vi använder samma kod som vi gjorde för att skapa vår tabell, den enda skillnaden den här gången är att vi lägger till en extra rad i vår tabell för att visa indexkolumnen. I den här ytterligare kolumnen använder vi egenskapen "$ index" som tillhandahålls av AngularJS och använder sedan +1-operatören för att öka indexet för varje rad. Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren. Produktion: Från produktionen, Du kan se att en ytterligare kolumn har skapats. I den här kolumnen kan vi se de index som skapas för varje rad. Sammanfattning: Tabellstrukturer skapas med hjälp av standardtaggarna som finns tillgängliga i HTML. Data i tabellen fylls med "ng-repeat" -direktivet. OrderBy-filtret kan användas för att sortera tabellen baserat på vilken kolumn som helst i tabellen. Det stora bokstavsfiltret kan användas för att visa data i vilken textbaserad kolumn som helst. Egenskapen "$ index" kan användas för att skapa ett index för tabellen. Ett vanligt problem under utvecklingen med AngularJS.JS-tabeller är implementeringen av stora datamängder som har mer än 1000 datarader. Ibland kan ng-repeat-direktivet inte reagera, och följaktligen svarar hela sidan ibland inte. I ett sådant fall är det alltid bättre att ha paginering där datorraderna är spridda över flera sidor.