Angular.js: Feature: ngTrueValue sollte Nicht-String-Werte akzeptieren

Erstellt am 25. Juli 2012  ·  60Kommentare  ·  Quelle: angular/angular.js

Für ng-Modell-Kontrollkästchen unterstützt ngTrueValue nur Zeichenfolgen. Es sollte wirklich nur einen Winkelausdruck und eval akzeptieren, um den Wert zu erhalten, damit es beispielsweise ein js-Objekt unterstützt.

PRs plz! forms moderate feature

Hilfreichster Kommentar

Ich hatte gerade eine interessante Erkenntnis. Was ich versucht habe – und wie es aussieht, was viele von Ihnen versucht haben – kann tatsächlich erreicht werden mit:

ng-true-value="{{ myVariable | json }}"

Dies unterstützt Zeichenfolgenwerte, boolesche Werte und Zahlen. Ich bin mir noch nicht sicher, ob mir das wirklich gefällt, aber ich fand es auf jeden Fall unterhaltsam. Und vielleicht hilft das jemand anderem.

Alle 60 Kommentare

Ich bin mir des Zwecks von ngTrueValue nicht ganz sicher, außer dass es wie eine praktische Anweisung zum Hinzufügen von Uhren zu einem Controller für einen Fall erscheint. Ich vermute, wenn Sie ein Modell auf einen komplexen Wert setzen möchten, ist es möglicherweise sauberer, ein $scope.$watch auf das Modell Ihres Kontrollkästchens zu setzen und ein Modell im Bereich entsprechend zu ändern.

@coli , hast du einen bestimmten Anwendungsfall im Sinn? @IgorMinar , @mhevery , @vojtajina , was denkt ihr?

Anwendungsfall ist eigentlich ziemlich häufig:

Ich habe ein Array von, sagen wir, Kategorieobjekten in sagen wir $scope.categories=[{id:5,name:"First"},...}

Dann habe ich ein selectedCategories-Array, das eine Teilmenge dieser Kategorien enthält.

Ich möchte ein Kontrollkästchen für einige Kategorien (Paging) anzeigen, und wenn Sie das Kontrollkästchen aktivieren oder deaktivieren, wird selectedCategories geändert.

Ich habe tatsächlich eine Direktive geschrieben, die das standardmäßige Checkbox-Verhalten überschreibt, um Unterstützung für das Obige hinzuzufügen. Bei Bedarf kann ich den Code teilen.

Meine Verwendung endete so, keyField wurde benötigt, um einen Objektvergleich durchzuführen, da in meinem Fall das ausgewählte Gruppenobjekt und das Gruppenobjekt anfangs leicht unterschiedlich sein könnten (sie stammten von 2 verschiedenen Backend-APIs).

<ng-repeat="group in groups>
    <input type='checkbox' ng-model="selectedArray" ng-true-value="group" mi-checkbox="{keyField:'id'}">
</>

Verdammt, ich habe einen viel einfacheren Anwendungsfall, von dem ich enttäuscht festgestellt habe, dass er nicht funktioniert - ich brauche eine Ganzzahl und keine Zeichenfolge!

Ich verwende eine Vorlage, um ein Kontrollkästchen-Steuerelement zu rendern. In diesem Fall kann ich den wahren Wert nicht kennen, dieser Wert hängt von bestimmten Steuerinformationen ab, die ich rendern möchte.

Auch ich würde es vorziehen, dass ng-true-value ein Ausdruck ist. Wenn Ihre Anzahl von Checkboxen zur Laufzeit bestimmt wird, müssen Sie auf Scope-Methoden mit Timeout-Wrappern zurückgreifen.

+1. Unterstützungsausdruck in ng-true-value

+1 Ganzzahl in ng-true-Wert unterstützen

+1 für Ausdruck statt String

+1 Unterstützungsausdrücke!

+1 für Ausdrücke

+1 Hilfsobjekte:

<div ng-repeat="group in groups">
    <input type='checkbox' ng-model="array[$index]" ng-true-value="group" />
</div>

@coli würde es Ihnen etwas ausmachen, die von Ihnen geschriebene Richtlinie zu teilen? Es würde mir eine große Hilfe sein, während dieses Problem noch geprüft wird. Vielleicht im Kern?

@brab Ich habe es leider bei einem früheren Job geschrieben, aber im Grunde ähnelt es dem eingebauten Code für Kontrollkästchen, ich habe es in eine benutzerdefinierte Direktive kopiert/eingefügt und Unterstützung für Ausdrücke hinzugefügt. (+ ein hässlicher Hack, um den eingebauten zu entfernen)

Ausdrücke wären toll! Es würde jedoch sogar ein Javascript-Wahrheitstest für ganze Zahlen erwartet. Ich verwende $resource, um ein Objekt zu füllen, das ganzzahlige Werte (1 oder 0) aus einer booleschen Datenbank zurückgibt. Diese werden dann an den $Scope angehängt, für den das ng-Modell an der Eingabe gebunden ist. War wirklich überrascht, als ich herausfand, dass die Einstellung ng-true-value="1" die Ganzzahl 1 nicht als wahr erkennen und das Kontrollkästchen aktivieren würde. Werde mich in der Zwischenzeit mit anderen erwähnten Methoden befassen.

+1

+1 für Ausdrücke

+1. Unterstützungsausdruck in ng-true-value

+1 für unterstützende Ausdrücke!
In meinem Fall muss ein Formular dynamisch erstellt werden.
Beispiel: http://jsfiddle.net/federosky/N8Wjm/5/

+1 für Ganzzahl

1+ für Ganzzahl

+1 für Integer (oder eine beliebige JS-Nummer)

:+1: bitte um unterstützende Äußerungen! bitte! bitteeee! :-)

+1 zumindest für Integer-Unterstützung, vorzugsweise auch Ausdrücke.

Wie wäre es, wenn jemand eine PR für unterstützende Zahlen vorschlägt?

+1 für Ausdrücke

+1 für Ganzzahl

+1 für Ganzzahl

+1

:+1: für Ausdrücke.

+1. Laufen Sie einfach in das Problem, wenn ich eine boolesche Eigenschaft „versteckt“ habe, die als „Sichtbar“-Kontrollkästchen auf der Seite dargestellt werden sollte. Also brauche ich den Status "markiert", um FALSCH zu bedeuten, und nicht markiert, um "WAHR" zu bedeuten.

Ich frage mich, was wäre eine einfache Problemumgehung für dieses Problem? Ich mag es nicht wirklich, meine eigene Checkbox-Direktive zu schreiben oder den Gültigkeitsbereich mit den inversen booleschen Hilfseigenschaften zu verschmutzen, nur um sie für die indirekte Bindung zu verwenden.

Dies ist wahrscheinlich ziemlich trivial zu implementieren, ich werde es vor dem Schlafengehen versuchen.

Mein Patch unterstützt nur konstante Ausdrücke, aber wenn die Leute es wirklich brauchen, nehme ich an, dass jeder Ausdruck ausreichen würde. Dies war jedoch der einfachste Weg, um keine Breaking Change zu verursachen.

+1

+1

+1

+1 für Integer-Typ

+1

+1 für Ausdrücke

+1

+1

+1

+1

:+1:

Dies sind die Hacks, die jetzt benötigt werden (viele WTFs):

<input type="checkbox" ng-model="fake" ng-checked="!notChecked" ng-change="notChecked = !notChecked"/>

+1

+1 Es waren zwei Jahre "+1". Warum unterstützen wir das noch nicht?

@jancarloviray , +1

Schade: Für mich bedeutet das, dass die Dinge komplizierter geworden sind.
Früher habe ich verwendet
ng-true-value="{{proxyOnValue}}"
wo ProxyOnValue in einem Controller initialisiert wurde.
(Dieselbe Ansicht wird für die HTTP/HTTPS/FTP/POP3/SMTP-Proxykonfiguration wiederverwendet, wenn der tatsächliche Wert anders ist.)

Jetzt habe ich es versucht
ng-true-value="proxyOnValue"
aber das löst eine Ausnahme aus, weil der Ausdruck nicht konstant ist.

Das bedeutet also, dass ich eine einfache Implementierung (ngTrueValue) durch eine komplexere Implementierung (watch oder Object.defineProperty) ersetzen muss, also eigentlich das Gegenteil von dem, was beabsichtigt war.

Warum diese künstliche Einschränkung?
Gerade

  • Verwenden Sie den aktuellen Wert von ngTrueValue/ngFalseValue, wenn sich das Modell ändert oder der Benutzer auf das Kontrollkästchen klickt
  • haben Sie zur Sicherheit eine interne Überwachung der ngTrueValue/ngFalseValue-Ausdrücke (wenn sie nicht konstant sind) und aktualisieren Sie den Status des Kontrollkästchens, wenn die Überwachung ausgelöst wird.

@eekboom - Sie können Ihre Interpolation immer noch verwenden: http://plnkr.co/edit/LQ6OpFjkjiFLxxMJ9hxj?p=preview

@petebacondarwin - er kann die Interpolation verwenden, aber es wird ihm nicht helfen: http://plnkr.co/edit/nNwjEkPIDJwe60HWX950?p=preview
Der Wert wird nur einmal überprüft - spätere Änderungen werden nicht berücksichtigt, daher wird immer nur der Initialwert verwendet.

@dliebscher - mein Verständnis war, dass @eekboom es nur einmal initialisieren wollte:

Früher habe ich ng-true-value="{{proxyOnValue}}" verwendet, wo ProxyOnValue in einem Controller initialisiert wurde.

Ja und nein: Ich möchte es nur einmal initialisieren, aber erst nachdem die Proxy-Konfiguration über xhr geladen wurde. Es ändert sich also (von undefiniert) einmal, nachdem die Ansicht initialisiert wurde.

@eekboom
Als ich von 1.2 migrierte, wechselte ich zu Folgendem:

ng-true-value="{{proxyOnValue}}"

zu

ng-true-value="'{{proxyOnValue}}'"

Was funktioniert, sieht aber blöd aus

Ich hatte gerade eine interessante Erkenntnis. Was ich versucht habe – und wie es aussieht, was viele von Ihnen versucht haben – kann tatsächlich erreicht werden mit:

ng-true-value="{{ myVariable | json }}"

Dies unterstützt Zeichenfolgenwerte, boolesche Werte und Zahlen. Ich bin mir noch nicht sicher, ob mir das wirklich gefällt, aber ich fand es auf jeden Fall unterhaltsam. Und vielleicht hilft das jemand anderem.

getu-lar Ich habe versucht, was Sie sagten, mit einem komplexen Objekt, es funktioniert. In den ng-false-Wert habe ich mit ng-false-value="{}" gefüllt. Bevor ich mich mit Daten befasse, übergebe ich einen Filter, um alle falschen Werte aus dem Array abzuschneiden. Also, vielen Dank!

Die Lösung von getu-lar hat bei mir funktioniert. Danke.

Ich habe versucht, einen Ausdruck zu verwenden, der in eine Zeichenfolge mit Unterstrich aufgelöst wird, z. B. "101_3". Ich habe die Lösung von getu-lar verwendet und sie funktioniert einfach. Fühlt sich aber wie ein Hack an. Danke, dass du es geteilt hast!

+1 für Ausdrücke

+1

Es scheint nicht so, als gäbe es für das Angular-Team viel Hoffnung, eine vernünftige Checkbox-Anweisung für die 1.x-Serie bereitzustellen ... Es kann nicht zu schwierig sein. Die Ausdrucksunterstützung wäre aufgrund der obligatorischen Anführungszeichen vollständig abwärtskompatibel.

Bis dahin funktioniert die vorgeschlagene Problemumgehung für mich:

ng-true-value="{{ myVariable | json }}"

Stellen Sie sicher, dass myVariable im Controller definiert ist. Ich habe versucht, es in Post-Link zu definieren, und es hat nicht funktioniert.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen