2016-03-30 6 views
0

Ich versuche Editor für Array von Zahlen zu tun mit NoUiSlider (Yankovsky directive)NoUiSlider in Winkel - bindet an Array von Zahlen

Ich habe grundlegende Funktionalität schaffen verwaltet, aber ich bin zu kämpfen mit der Bindung.

Ich habe meine Array wie folgt:

vm.myNumbers = [1, 2, 6]; 

aber diese Richtlinie erfordert Option als ganzes Objekt gesetzt werden:

vm.options = { 
    start: 3, 
    connect: 'lower', 
    range: { 
    min: 0, 
    max: 10 
    } 
}; 

Ich mag würde Schieber für jedes Element meiner Array erstellen und aktualisiert automatisch seinen Wert, so wie auf dem unteren Bild.

enter image description here

Problem ist NoUiSlider Richtlinie für Wert haben keine Standalone-Bindung.

Hier zeigt Plunker meine aktuellen Code: http://plnkr.co/edit/ljm96tdcGgvwo3Hnayfk?p=preview

Kann ich Elemente aus meinem Array binden, aber das Objekt, dass Optionen übrigen Optionen halten?

Antwort

1

Sie zu diesem Plunker Code beziehen ... http://plnkr.co/edit/4VgDnm Sie sind verbindlich gleichen options jeden Schieber und damit Probleme bekommen. Ich habe Ihren Code aktualisiert, der Ihnen helfen kann.

+0

Ich weiß, dass jeder Schieberegler an die gleichen 'Optionen' bindet. Ich wusste nicht, wie man jeden Slider an separate Optionen bindet. In Ihrem Code erstellen Sie neue Schieberegler, aber Werte im unteren Bereich ändern sich nicht, wenn Sie Schieberegler verschieben. Beim Start hat der erste Schieberegler den Wert 1 und im unteren Bereich 1 am Anfang des Arrays. Wenn ich den ersten Schieberegler bewege, möchte ich, dass sich dieser Wert ändert. Das ist mein Hauptproblem. – Misiu

+0

Also bei Start sollten Schieberegler Werte wie in Ihrem Plunker haben, aber nach Verschieben Schieberegler Werte im unteren Bereich sollten sich ändern. – Misiu

+0

Dies liegt daran, dass es mit dem primitiven Datentyp verknüpft ist. und daher Variablen nach Wert nicht durch Referenz übergeben. Ich denke, Sie können Event-Handler verwenden, die von dieser Richtlinie bereitgestellt werden. Auch ich denke nicht, dass es notwendig ist, weil du auf Variablen zugreifen kannst, die "Start" Stütze von 'sliderOptions' verwenden, das Feld der Gegenstände –

-1

Ich bin Noislider-eckigen Autor. Ich habe eine Beispiellösung zu Ihrem Problem http://yankovsky.github.io/nouislider-angular/examples/#/multiple-sliders-binding hinzugefügt.

verwendet I $ scope $ watchCollection zu überprüfen, ob es irgendwelche Änderungen in Schiebern Werte sind:.

$scope.$watchCollection(function() { 
    return that.slidersOptions.map(function(options) { 
     return options.start; 
    }) 
}, function(newValue) { 
    that.numbers = newValue; 
}); 

Lassen Sie mich wissen, wenn es für Sie arbeitet!