2017-07-18 3 views
0

Ich bin immer noch ein Noobie zu eckigen Dev, hatte ich ein paar vorgeschlagene Lösungen für mein Problem, aber nicht realisiert, wie Sie sie implementieren. Ich verwende den [Angular Bootstrap Toggle] -Schalter in meinem Winkelausdruck, um Ein/Aus-Werte für mehrere Parameter zu steuern.Toggle Switch State basierend auf JSON-Daten

Der Status des Toggle (ON/OFF) basiert auf ng-model = "toggleValue", wobei erwartet wird, dass der Toggle-Wert der boolesche Typ ist, d. H. Wahr, falsch.

Jetzt die Daten, die ich aus meiner Datenbank importieren (oracledb) hat diesen Parameter "toggleValue" definiert als "Y" (True) oder "N" (False). Wie mache ich den Kippschalter zur Unterstützung der Y/N-Werte?

An Lösungen gedacht:
1) Konvertieren Sie die eingehenden JSON-Werte von Y nach true und N nach false.
2) binden ng-Modell an Ausdrücke, die als wahr ausgewertet werden, wenn der Wert "Y" ist, sonst falsch.
3) Hack Angular Bootstrap toggeln JS-Skript. (Am wenigsten bevorzugt)

View Screenshot

Fiddle-Link: https://jsfiddle.net/3gt64xz8/1/

<toggle ng-model="item.SHIP_FROM_STORE_IND" aria-label="SFS Switch" size="btn-xs"></toggle> 

Antwort

0

So fand ich ein paar Lösungen für dieses Problem umgehen können. Ich glaube nicht, dass dies die optimale Lösung ist, denn unabhängig davon müssen wir unser Datenobjekt iterieren und die Werte des erforderlichen Schlüssel: Wert-Paares von "Y" in "True" und "N" in "False" umwandeln.

1) ng-init
Ich habe eine übergeordnete Abteilung über die Teilung in den I benötigt wurde, um diese ng-Modellvariablen zu verwenden, und neu zugewiesen, die Werte von toggleValue mit dem folgenden Code als ng-init ermöglicht unter Verwendung Ausdrücke, die ng-Modell nicht

<div ng-init="item.SHIP_FROM_STORE_IND = init(item.SHIP_FROM_STORE_IND); 
item.BOPIS_ENABLED_IND=init(item.BOPIS_ENABLED_IND); 
item.BOSTS_ENABLED_IND=init(item.BOSTS_ENABLED_IND)"> 

Init-Funktion in der Steuerung:

$scope.init = function(value) { 
$scope.testInput= (value=='Y')? true:false; 
return $scope.testInput; 
} 

Vorteile: Da ich ng-repeat und Paginierung verwenden, nur die s cope-Elemente der aktuellen Seite werden geändert und somit effizienter, und iterativ werden andere beim Seitenwechsel geändert.
Nachteile: Ich habe auch ein Suchfeld in meiner Ansicht, mit dem Sie die Datensätze basierend auf ToggleValue-Parameter (True/False) filtern können. Wenn nun der Filter angewendet wird, filtert er nur die aktuellen Seitenelemente und nicht alle Elemente heraus, da sie immer noch in "Y" - oder "N" -Werten sind.

2) Iterate das Objekt und tauschen Sie den Wert in der Steuerung, während die Daten-Abruf

Das ist ziemlich einfach und naheliegende Lösung, aber offensichtlich nicht die effizienteste.

$scope.items = storeFactory.getRecords().query(
    function(response) { 
     $scope.items=response; 
     $scope.totalItems = $scope.items.length; 
     for (var i=0, len=$scope.totalItems; i<len; i++) { 
      $scope.items[i].toggleValue = ($scope.items[i].SHIP_FROM_STORE_IND=='Y')? true:false; 
     } 

    }, 
    function(response) { 
     $scope.waitMessage = "Error: "+response.status + " " + response.statusText; 
    }); 

In ähnlicher Weise können wir die Daten während aller Änderungen/Updates zurück zum Server konvertieren.

+0

Ich glaube, diese Lösung löst das Problem, ist aber ein Hack. Ich akzeptiere das vorübergehend als Antwort und werde mich ändern, wenn wir eine andere vorgeschlagene Lösung haben. – shubhammakharia

Verwandte Themen