ugrás a tartalomhoz

angular filter

szabo.b.gabor · 2014. Feb. 8. (Szo), 15.36
Sziasztok!

no ismét angular.. kopaszodok rendesen :D

tehát van egy ilyenem
<input ng-model="searchTerm" />
<ul>
<li ng-repeat="candidate in candidates | filter:searchCandidate">
<a href="#/{{candidate.url}}">{{candidate.name}}</a>
<span class="separator"></span>
</li>
</ul>
tehát szűrve listázom az emberkéket. ezek az emberkék egymás mellett íródnak ki és van köztük egy separator.

azt szeretném elérni, hogy a separator a sorok végén ne jelenjen meg.

hogy tudom azt elérni, hogy fusson le a separator eltüntető függvényem, ha a lista frissül?

próbáltam a searchTerm-re ng-change-et rakni. szépen lefut a függvényem. az előző állapotra. majd frissül a lista és ott van mindenhol a separator.

próbáltam a direktívát rakni a li, a, span elemekre, de még azelőtt lefut a cucc, hogy kicserélődne a {{candidate.name}} a valós névre, így teljesen irreleváns helyeken tűnnek el a separatorok.

szóval mit kell tegyek, hogy jókor fusson le az én kis drága függvényem?
‹ Gombnyomásra vágólapra másolja a táblázat elemeit ikon az option tag-ben ›
 ■
1

kopaszodok rendesenMég

Hidvégi Gábor · 2014. Feb. 8. (Szo), 16.18
kopaszodok rendesen
Még szerencse, hogy van miből : )

<li ng-repeat="candidate in candidates | filter:searchCandidate">
Ez a szerveren vagy a kliensen szűr?
3

jelen esetben kliensen

szabo.b.gabor · 2014. Feb. 8. (Szo), 17.22
jelen esetben kliensen
7

Miért használsz AngularJS-t?

Hidvégi Gábor · 2014. Feb. 9. (V), 12.42
Miért használsz AngularJS-t?
9

pénzért! :D

szabo.b.gabor · 2014. Feb. 9. (V), 16.22
amúgy marha jó cucc, mindenkinek csak ajánlani tudom.
10

Végighallgattam Árvai Zoltán

deejayy · 2014. Feb. 9. (V), 18.19
Végighallgattam Árvai Zoltán előadását az AngularJS-ről a webconfon, tényleg elég impresszív, én ugyan sallangok nélkül (bower? grunt? nem emlékszem, annyi mindent láttam aznap :)) használtam, de valóban csodaszerszám.

Két projekthez "használtam" (tehát: kísérleteztem), az egyiket végül is a tapasztalatlanságom miatt inkább megcsináltam klasszikus módon (server oldalra hagytam mindent), a másiknál viszont elég nagy problémába ütköztem, ami egyébként sejthető volt: performancia. Egy socket.io-s realtime monitorozót csináltam vele, és a cpu használat indokolatlanul magas volt, újraírva Angular nélkül 25-40%-ra sikerült leszorítani (x86). De maga az js fájl is 700k, így ezen nem kell csodálkozni. Nem tudom hogyan reagál egy arm architektúrás cpu erre, de a mobilra fejlesztés így jobban meggondolandó.
11

A kliensoldali szűrésnek mi a

Hidvégi Gábor · 2014. Feb. 9. (V), 21.12
A kliensoldali szűrésnek mi a haszna? Ha kevés az adat, akkor az adatforgalom is kevés, és senki sem veszi észre, hogy egy-két tizedmásodperccel lassabban jön le a szerverről. Ha meg sok az adat, akkor meg eleve nem küldhetsz le mindent.
12

Például kliens-oldalon akarsz

MadBence · 2014. Feb. 9. (V), 22.21
Például kliens-oldalon akarsz dinamikusan szűrni. Az adatok egyszer jönnek le, amit később bárhogy, bármilyen szempontok szerint megszűrhetsz, azonnal. UX szempontból ez mindent visz.
14

Mint írtam,

Hidvégi Gábor · 2014. Feb. 9. (V), 22.50
Mint írtam, tizedmásodpercekről van szó, az átlagfelhasználó ennél lassabban gépel. Csak a kliensoldali kódot bonyolítja, mert a szűrőket és a szűrők programlogikáját ott is meg kell valósítani, nem csak a szerveren.
17

Ha a program hálózathoz

MadBence · 2014. Feb. 9. (V), 23.06
Ha a program hálózathoz fordul, akkor a garantált válaszidő ∞, mobilneten minden egyes újraszűréskor akár 3-4 (vagy akár több) másodperc várakozás pedig lényeges (foglalkozni kell vele, loading animáció, stb).
18

Szerinted egy Angulart

Hidvégi Gábor · 2014. Feb. 9. (V), 23.10
Szerinted egy Angulart mobilon fognak futtatni? Mekkora az az adatmennyiség, amit mobilnak le lehet küldeni?
19

Ha az Angular mérete miatt

MadBence · 2014. Feb. 9. (V), 23.18
Ha az Angular mérete miatt aggódsz: kb ugyanakkora, mint a jQuery (30KB körüli)
21

Angular

Hidvégi Gábor · 2014. Feb. 9. (V), 23.30
A gépemen van egy forrás, az 700 kilobájtos, de a szoftver mérete még semmit nem mond el a sebességéről és a memóriahasználatáról. Ráadásul ne feledd, ez csak a keretrendszer, az alkalmazáslogika még erre jön rá.
13

Offline

Endyl · 2014. Feb. 9. (V), 22.45
Ha nincs hálózat (vagy gyatra), akkor igen hamar észreveszik, hogy nem megy az alkalmazás, pedig elvi akadálya nincs, mert az adatok már úgyis a kliensen vannak (mert mondjuk utazás előtt gyorstárazta őket, stb).
15

Offline

Hidvégi Gábor · 2014. Feb. 9. (V), 22.54
Kérdés az, mit tudsz úgy megvalósítani, hogy offline is tudsz az adatokkal dolgozni? Egy email az egy egyszerű eset, van címe, szövegtörzse, címzettjei, és itt véget is ért a történet, de ha olyan adatokkal dolgozol, ahol van egy minimális összefüggés az elemek között, az online kapcsolat elengedhetetlen.
16

Az összefüggéseket miért nem

Endyl · 2014. Feb. 9. (V), 23.06
Az összefüggéseket miért nem gyorstárazhatom az adatokkal együtt?
20

Összefüggések

Hidvégi Gábor · 2014. Feb. 9. (V), 23.27
Móricka típusú összefüggéseket nyugodtan gyorstárazhatsz a kliensen, nem véletlenül van az, hogy az összes techdemóban (amit ezen a héten láttam, például Angular, Ember, Meteor) blogbejegyzés bonyolultságú rekordokkal operálnak, mert azokkal természetesen gyors és egyszerű minden. De ha mondjuk a valós életből veszünk egy példát, egy közepes cég ezerötszáz partneréből szeretnénk kikeresni egynek az egyik bankszámláját, és azt szeretnénk egy szállítólevél fejlécében feltűntetni, akkor elég méretes lesz az a szoftver, ami ezeket a kapcsolatokat mind kezelni tudja.
23

én mondjuk abban látom az

szabo.b.gabor · 2014. Feb. 10. (H), 07.51
én mondjuk abban látom az angular előnyét, hogy ha olyan mondjuk a formod hogy dinamikusan változik, pl szállítólevél elemeiből lehet n db, akkor ennek felépítését, a kliens oldal js megvalósítását sokkal könnyebb és biztosabb megoldani angularjs-ben.

az hogy egy szűrést hogyan valósítasz meg, az adott helyzet dönti el, de azért jó dolog hogy van rá lehetőség.
22

pl ha a service amit

szabo.b.gabor · 2014. Feb. 10. (H), 07.48
pl ha a service amit használsz eleve nem tud szűrni, csak annyira képes hogy visszaad minden adatot.
2

Csak egy kósza ötlet. A CSS3

Gl3am · 2014. Feb. 8. (Szo), 16.33
Csak egy kósza ötlet. A CSS3 last-child selector ilyenkor szóba jöhet?

li:last-child > .separator {
  display: none;
}
Vagy a:

:last-of-type
:nth-child(n)
4

ng-if="!$last"

T.G · 2014. Feb. 8. (Szo), 17.24
ng-repeat-ben használhatsz $index változót, illetve $first, $last stb. változókat.

<span class="separator" ng-if="!$last"></span>
update: a linket valamiért elrontja a WL, tehát: http://docs.angularjs.org/api/ng.directive:ngRepeat
5

szemléltetés

szabo.b.gabor · 2014. Feb. 8. (Szo), 17.26
jani | nagy erzsi | bela | ilonka
norbert | kelemen janos | kiss iren
manyi monika | elek istvan | joe
szóval a last-child nem elég, mert az csak a 'joe' nth-child sem segítség, mert mindegyik másmilyen hosszú.

nekem egy event kellene. igazából már meghekkeltem, de nem lett elegáns, érdekelne a hivatalos mód.
6

Mi lett a meghackelt megoldás?

T.G · 2014. Feb. 9. (V), 11.19
Először nem esett le, hogy mi a cél, de a minta alapján már világos. Tényleg meglepő, hogy nem kapható el az esemény. (én is csak nemrég kezdtem el játszani az Angular.JS-sel, így simán lehet, hogy csak rossz helyen keresek)

Mi lett a meghackelt megoldás? Elegáns megoldás hirtelen én sem találtam, searchTerm-ra tett watch kis késleltetéssel a rondább megoldás, illetve egy új filter, ami igazából nem szűr semmit.

<li ng-repeat="candidate in candidates | filter:searchCandidate | filter:fixSeparator() ">


var timeoutID = null;
$scope.fixSeparator = function () {
	window.clearTimeout(timeoutID);
	timeoutID = window.setTimeout($scope.doFixSeparator, 10);
};
$scope.doFixSeparator = function () {
	// ...
};
(kis késleltetés viszont ide is kellett, mert többször fut le, optimalizálni kellett, ám emiatt tényleg elég csúnyácska megoldásnak tűnik...)
8

nálam is filter

szabo.b.gabor · 2014. Feb. 9. (V), 16.20
pontosan a filterbe tett trigger lett a workaround. megspékelve egy pompás debounce kóddal, amit a twitter feed-en csíptem el.

persze túrtam a netet.. egyszer majdnem azt hittem, hogy megvan a megoldás (a repeat-en belül a last dob egy event-et amit elkapok), de ez sem ér sokat sajnos, hol be vannak már helyettesítve a dolgok, hol nem. a filterben elhelyezve biztosabb volt a működése.
24

$last + ng-show

razielanarki · 2014. Feb. 10. (H), 13.39
a repeateren belül egy csomó dolog elérhető: http://docs.angularjs.org/api/ng.directive:ngRepeat

én mondjuk így tüntetném el az utsó separatort:
<span class="separator" ng-show="!$last"></span>
http://docs.angularjs.org/api/ng.directive:ngShow
25

nem lesz jó..

szabo.b.gabor · 2014. Feb. 10. (H), 14.18
nem lesz jó..