Dynamic data-binding in AngularJS

Ich bin Aufbau einer AngularJS-app und das habe ich lief in ein Problem. Ich Spiele mit dem framework für eine Weile und ich habe noch siehe Dokumentation für so etwas oder Beispiele. Ich bin mir nicht sicher, welchen Weg zu gehen, Richtlinie, Modul, oder etwas, dass ich noch nicht gehört, aber...

Problem:

Grundsätzlich meine app ermöglicht es dem Benutzer, um Objekte hinzuzufügen, werden wir sagen, umfasst für dieses Beispiel, dass bestimmte Eigenschaften, die bearbeitbar sind: Höhe und mit einer Bezeichnung verknüpft ist. Anstatt jeder span hat seine eigenen Eingabefelder für die Höhe und die label-manipulation würde ich mag, um einen Satz von Eingabe-Felder, die in der Lage sind, Kontrolle über alle Iterationen des span-Objekt.

Also meine ca. funktioniert der code so etwas wie dieses:

<span ng-repeat="widget in chart.object">
    <label>{{widget.label}}</label>
    <span id="obj-js" class="obj" style="height:{{widget.amt}}px"></span>
</span>
<button ng-click="addObject()" class="add">ADD</button>

<input type="text" class="builder-input" ng-model="chart.object[0]['label']"/>
<input type="range" class="slider" ng-model="chart.object[0]['amt']"/>

Den obigen code, wird es Benutzern ermöglichen, neue Objekte hinzufügen, aber die UI ist offensichtlich fest auf das erste Objekt im array.

Gewünschte Funktionalität:

Wenn ein Benutzer klickt auf ein Objekt, das es updates der Wert der Eingabe s ng-model zu binden, um das Objekt geklickt wird. Also, wenn "object_2" geklickt wird, wechselt der Eingang - ng-Modell-updates für die Synchronisierung mit dem object_2 Wert. Wenn der Benutzer klickt auf "object_4" es updates die Eingabe der ng-Modell, Sie bekommen die Idee. Smart UI, im wesentlichen.

Habe ich darüber nachgedacht, das schreiben einer Richtlinie Attribut namens "sync" drücken könnte der ng-model-status, um die UI gebunden. Ich habe allerdings über komplett erstellen Sie ein neues tag mit dem Namen <object> und bauen diese in den controller. Und ich habe gedacht, über die Verwendung ng-click="someFn()" dass updates für die Eingabefelder. Alle diese 'Möglichkeiten', die Ihre eigenen vor-und Nachteile, aber ich dachte, bevor ich entweder drehen sich auf etwas oder gehen den falschen Weg, ich würde Fragen Sie die community.

Hat jemand das schon gemacht (wenn ja, Beispiele)? Wenn nicht, was wäre die sauberste, AngularJS Weg, um dies durchzuführen? Cheers.

InformationsquelleAutor Scott Sword | 2013-03-04

Schreibe einen Kommentar