AngularJS: eine Verbindliche boolescher Wert, der den radio-button so, dass er updates Modells auf false deaktivieren-Ereignis

In meinem AngularJS-Anwendung, ich bin Kontakte anzeigen von Daten in einem raster. Mein typischer Kontakte JSON sieht so aus, als unten ...

[
    { type: "IM", value: "mavaze123", default: true },
    { type: "IM", value: "mvaze2014", default: false },
    { type: "IM", value: "mavaze923", default: false },
    { type: "IM", value: "mvaze8927", default: false },
    { type: "Email", value: "[email protected]", default: true },
    { type: "Email", value: "[email protected]", default: false } 
]

Letzten Eigenschaft 'default' ist eigentlich ein radio-button, Auswahl sollten, ändern Sie die ursprüngliche Standardwert für den entsprechenden Kontakttyp in der obigen JSON. Es kann ein default von jeder Art von Kontakt, d.h. wir können die Gruppe radio-buttons auf der Grundlage der Kontakt-Typ.

<div ng-repeat="contact in contacts">
    <div>{{contact.type}}</div>
    <div>{{contact.value}}</div>
    <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true"/></div>
</div>

Hinweis: Der obige code ist nicht exakt, aber ungefähr das gleiche, als
es erscheint in einem speziell für die grid-Komponenten.

Wenn ich jetzt laden meine Ansicht/Bearbeiten der Formular-Seite mit den oben JSON, ist es korrekt, zeigt das radio den Status aller Kontakte. Das problem kommt, nachdem die Seite geladen, wenn der Benutzer wählt einen anderen Kontakt als Standard. Diese tatsächlich ändert sich die Modell-Wert, der standardmäßig auf true für die neu gewählten Kontakt jedoch dem Modell-Wert der original-Standard-Kontakt bleibt wahr, auch wenn Ihr radio sich der Zustand ändert, um Sie zu deaktivieren/unscharf (weil Sie mit den gleichen 'name' - Wert).

Dachte ich Schreibe eine Richtlinie, aber ich bin nicht in der Lage zu bekommen, löste es auf radio-blur/deaktivieren-Ereignis.

Gibt es verschiedene Beiträge über verbindliche booleschen Werte, um zu radio-buttons, aber ich bin nicht in der Lage, um es arbeiten in meinem Szenario, wie ich will, um update-Modell Werte für die einzelnen radio-button ein radio-Gruppe. Sehen Sie, es gibt kein einziges Modell, eine radio-Gruppe.

AngularJS: eine Verbindliche boolescher Wert, der den radio-button so, dass er updates Modells auf false deaktivieren-Ereignis

InformationsquelleAutor mavaze | 2014-01-04
  1. 2

    Ich denke, dass sollten Sie ändern Ihr design zu trennen, die contacts aus contactTypes und speichern Sie die Schlüssel, um die Standard-Kontakt-Kontakt-Typ.

    In Ihrem aktuellen design gibt es duplizierte Werte für default - und das ist nicht der gewünschte Weg zur Arbeit mit radio. 

    $scope.contacts = [
        { type: "IM", value: "mavaze123" },
        { type: "IM", value: "mvaze2014" },
        { type: "IM", value: "mavaze923" },
        { type: "IM", value: "mvaze8927" },
        { type: "Email", value: "[email protected]" },
        { type: "Email", value: "[email protected]" } 
   ];

    $scope.contactTypes = {
        "IM": { default:"mavaze123"}, //the default is contact with value = mavaze123
        "Email": { default:"[email protected]"}
   };

    Sie Html:

    <div ng-repeat="contact in contacts">
            <div>{{contact.type}}</div>
            <div>{{contact.value}}</div>
            <div><input type="radio" name="{{contact.type}}" ng-model="contactTypes[contact.type].default" ng-value="contact.value"/></div>
        </div>

    DEMO

    Ich gehe davon aus, dass der Schlüssel der Kontakt ist value können Sie mit einem Id für Ihre Kontaktaufnahme.

    • Hi @khanh-an, Neige ich dazu, dies zu akzeptieren, da hatte ich schon diese arbeiten. Aber ich dachte, ich arbeiten auf der gleichen JSON-ich bin immer vom REST Antwort und das gleiche muss ich zur post, um REST-API nach der änderung. Ihre Lösung aber funktioniert, muss ich schreiben, backend-Logik zum konvertieren von in die original JSON-format und senden Sie es zur RUHE. Ich war fast da, als false auf true funktioniert perfekt, obwohl die reverse-Lookup auf die Auswahl des anderen radio von der gleichen Art Kontakt-Gruppe.
    • was meinst du mit reverse-Lookup?
    • es gibt kein wahr oder falsch in diesem design weisen Sie der Taste die Standard-Kontakt Kontakt-Typ.
    • Hi @khanh-an, spreche ich über die Lösung, die ich bisher erreicht mit dem JSON-format, die ich habe. Zuerst, ich bin in der Lage, wählen Sie nur einen aus jeder Gruppe. Zweitens, wenn default=false und wenn ich die select -, radio -, die änderungen des Modells zu wahren, jedoch, drittens, wenn ich wählen Sie ein anderes radio aus der gleichen Gruppe, die zuvor ausgewählten Optionsfelds aber seinen Zustand ändert (deaktivieren/Unschärfe), ändert sich nicht Ihr Modell Wert auf false.
    • Ich verstehe dein problem so hieß es in der Frage. Ich meine, im neuen design, gibt es keinen Standardwert (true oder false) für jeden Kontakt. Wir verschieben die standardmäßig den Kontakttyp statt. Jeder Kontakt-Typ speichert die Id der Standard-Kontakt -. Wir keine Pflege mehr über wahr oder falsch, nur Sorge um die Id von der Standard-Kontakt-Typ.
    • werfen Sie einen Blick auf diese: jsfiddle.net/cJce6/1 . Wir sind noch in der Lage, um anzuzeigen, true, false Staat, wenn Sie wollen.
    • Sie können immer noch Ihre Modell. Erstellen $scope.contactTypes nachdem Sie die Daten und aktualisieren Sie die default Werte, bevor Sie Sie senden zurück.
    • Danke @khanh-an. Wie gesagt im ersten Kommentar, nehme ich dies als Lösung. Ich habe nicht die Absicht, zu zeigen, true und false mit dem Wert (ich habe einige screenshots in meiner ursprünglichen Frage), aber müssen, kombinieren Sie Ihre Lösung mit dem, was @ zeroflagL zu sagen hat, zu erreichen das Endziel. Wenn dies gelingt, bin ich wenig überzeugt, aber vielleicht fühlen das ist der einzige Weg. Ich möchte Graben in mehr.
    • Bitte beachten Sie, ich bin mit einem benutzerdefinierten raster-Komponente, ist also eh zu senden brauchen, die 3 params raster übereinstimmen mit der Anzahl der Spalten.

    InformationsquelleAutor Khanh TO
  2. 1

    Ich Hinzugefügt ein Attribut-Direktive in meine input-Anweisung ...

    <div ng-repeat="contact in contacts">
    <div>{{contact.type}}</div>
    <div>{{contact.value}}</div>
    <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true" boolean-grid-model /></div>
</div>

    Und meine benutzerdefinierte Richtlinie ...

    myModule.directive('booleanGridModel') {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
           var radioSelected = scope.$eval(attrs.ngModel);
           if(radioSelected) {
               var selectedContact = scope.contact;
               _.each(scope.contacts, function(contact) {
                  if(contact.type === selectedContact.type) {
                      _.isEqual(contact, selectedContact) ? contact.default = true : contact.default = false;
                  }
               });
           }
       }
    };
}
    InformationsquelleAutor mavaze
  3. -1

    Warum erklären Sie ng-value="true" entfernen Sie bitte, dass 

    <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="{{contact.default}}"/></div>

    Nutzen Sie bitte $scope.$apply() in Ihrem Wert code ändern

    Wie etwas weiter unten 

    $scope.$apply(function ChangeType()
{
/Code
});

    Und Sie müssen zu ändern name="{{contact.type}}" zu name="contact.type{{$index}}" Weil einige Arten sind gleichen Namen.

    • name="Kontakt.geben Sie{{$index}}" nicht erlauben die Auswahl eines Standard-aus jeder Gruppe wird wie eine Standard-CHAT, eine Standard-E-Mail, aber Sie können wählen Sie eine Standard-Kontakt-über alle Typen. Dies ist nicht das, was ich will. Auch ng-value="{{Kontaktieren.default}}" nicht in die Auswahl der radio-button bei der Standardwert ist true. Mit dieser Lösung Letzte radio-button wird immer gewählt werden, auch wenn default=false. Wenn ich den ng-value="true" atleast ich sicher das radio wird nur ausgewählt, wenn die Standard-Modell-Wert ist true. Ich bin fast da, als false auf true funktionieren, reverse funktioniert nicht obwohl.
    InformationsquelleAutor Ramesh Rajendran
Schreibe einen Kommentar