Javascript - cum se leagă de lista valorilor de pavilion folosind angularjs, cod q - un rus (ro)

Am mai multe steaguri:

Aș dori să leagă lista din controlerul meu astfel încât să se schimbe caseta de selectare, controlerul salvează o listă cu toate valorile verificate, de exemplu ['apple' sau 'pear'].







Modelul Ng pare să fie capabil să lege valoarea unui singur drapel la o variabilă în controler.

Există un alt mod de a face acest lucru, așa că pot lega patru steaguri la lista din controler?

Există două modalități de a aborda această problemă. Fie utilizați o matrice simplă, fie o serie de obiecte. Fiecare soluție are argumente pro și contra. Mai jos veți găsi una pentru fiecare caz.

Folosind o matrice simplă ca intrare

HTML poate arăta astfel:

Și codul de control corespunzător va fi:

Pro-uri. O structură simplă a datelor și comutarea numelor sunt ușor de tratat

Contra. adăugarea / ștergerea este greoaie deoarece trebuie să gestionați două liste (introduceți și selectați)

Cu o serie de obiecte ca intrare

HTML poate arăta astfel:

Și codul de control corespunzător va fi:

Pro-uri. Adăugați / eliminați este foarte simplu

Contra. o structură de date oarecum mai complexă și comutarea după nume sunt greoaie sau necesită o metodă auxiliară

Iată o scurtă direcție multiplă care pare să facă ceea ce vrei să faci. Tocmai am denumit o listă de verificare. Actualizează matricele atunci când se schimbă casetele de selectare și actualizează casetele de selectare când se schimbă matricea.

Aici este un controler și o vedere care arată cum îl puteți folosi.

(Butoanele arată că schimbarea matricei va actualiza și casetele de selectare.)

Pe baza răspunsurilor din acest thread, am creat o directivă a modelului de listă de verificare care acoperă toate cazurile:

  • O serie simplă de primitivi
  • Gama de obiecte (selectați un identificator sau întregul obiect)
  • Obiectul de proprietate ierarhie

Pentru evenimentul start-start, acesta va fi:







Modelul listei de verificare a directivei pe GitHub Vitaly Potapov a lucrat absolut pentru mine (folosind obiecte complexe).

Am petrecut câteva ore încercând să obțin alte soluții pentru a lucra fără noroc. Excelentă muncă, veselă!

Folosind șirul indexului $ pot ajuta să utilizați o hartă hash a valorilor selectate:

Astfel, obiectul ng-model este actualizat cu o cheie reprezentând indexul.

După un timp, $ scope.someObject ar trebui să arate cam așa:

Această metodă nu va funcționa pentru toate situațiile, dar este ușor de implementat.

Din moment ce au făcut un răspuns că lista nu a fost folosit, voi presupune răspunsul la întrebarea mea cu o întrebare: „Nu, nu trebuie să fie o listă“ Am, de asemenea, impresia că poate ai pierdut serverul HTML ca «cec» este prezent în exemplul HTML (nu ar fi necesară în cazul în care ng-modelul utilizat pentru simularea indicatorilor dvs.).

Oricum, asta am vrut să spun când am pus o întrebare, presupunând, de asemenea, că creați un server de server HTML:

Ng-init permite ca HTML-ul HTML generat să stabilească mai întâi anumite steaguri.

Am adaptat răspunsul acceptat de Yoshi pentru rezolvarea obiectelor complexe (în loc de șiruri de caractere).

În HTML (să presupunem că casetele de selectare sunt în prima coloană a fiecărui rând din tabel).

În fișierul controlers.js.

Iată o altă soluție. Potențialul deciziei mele:

  • Nu necesită ore suplimentare (care pot afecta performanța)
  • Nu necesită nici un cod în controler pentru a fi curat
  • Codul este încă oarecum scurt
  • Acest lucru necesită utilizarea unui număr foarte mic de coduri în mai multe locuri, deoarece aceasta este doar o directivă

În cele din urmă, folosiți-o astfel:

Și asta e tot. Singura adăugare este atributul set-box-array-set.

Puteți combina AngularJS și jQuery. De exemplu, trebuie să definiți o matrice, $ scope.selected = []; În controler.

Puteți obține o matrice care deține elementele selectate. Utilizarea metodei de alertă (JSON.stringify ($ scope.selected)). puteți verifica elementele selectate.

Există o modalitate de a lucra direct cu o matrice și de a folosi modelul ng în același timp prin ng-model-options = "“.

Trucul este de a utiliza funcția getter / setter în modelul dvs. ng. Astfel, puteți utiliza matricele ca model real și elementele logice "fals" în modelul de intrare:

Caveat. Nu ar trebui să utilizați această metodă dacă mesele dvs. sunt mari, deoarece myGetterSetter va fi numit de mai multe ori.

Următoarea soluție pare o opțiune bună,

Și în modelul de controler, valoarea fructelor va fi







Trimiteți-le prietenilor: