Associazione dati dinamici in AngularJS

Question

Sto costruendo un'applicazione AngularJS e ho riscontrato un problema. Ho giocato con il framework per un po 'e non ho ancora visto la documentazione per qualcosa come questo o altri esempi. Non sono sicuro di quale strada per andare verso il basso, la direttiva, modulo, o qualcosa che non ho ancora sentito parlare ...

Problema:

Fondamentalmente il mio applicazione permette all'utente di aggiungere oggetti, diremo span per questo esempio, che ha alcuni attributi che sono modificabili: altezza e un'etichetta associata. Piuttosto che ogni span ha i propri campi di input dedicati per la manipolazione di altezza e etichetta, vorrei utilizzare un set di campi di input in grado di controllare tutte le iterazioni del nostro oggetto span.

Quindi il mio ca. codice di lavoro è qualcosa di simile:

<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']"/> 

Il codice di cui sopra permetterà agli utenti di aggiungere nuovi oggetti, ma l'interfaccia utente è ovviamente hardcoded per il primo oggetto nella matrice.

funzionalità desiderata:

Quando un utente fa clic su un oggetto che aggiorna il valore di ng modello dell'ingresso di legare all'oggetto cliccato. Quindi, se si fa clic su "object_2", gli aggiornamenti del modello ng dell'input vengono sincronizzati con il valore dell'oggetto_2. Se l'utente fa clic su "object_4" aggiorna il modello di input, l'idea è arrivata. Intelligente interfaccia utente, essenzialmente.

Ho pensato di scrivere un attributo di direttiva chiamato "sync" che potrebbe spingere lo stato di ng-model all'interfaccia utente associata. Ho pensato di creare completamente un nuovo tag chiamato <object> e costruirli nel controller. E ho pensato di usare ng-click="someFn()" che aggiorna i campi di input. Tutte queste sono "possibilità" che hanno i loro pro e contro, ma ho pensato prima di girare qualcosa o andare sulla strada sbagliata che chiederei alla comunità.

Qualcuno l'ha già fatto prima (se sì, esempi)? In caso contrario, quale sarebbe il modo più pulito, AngularJS per eseguire questo? Saluti.

Answer 1

Non penso che sia necessario utilizzare una direttiva personalizzata appositamente per questa situazione, anche se ciò potrebbe essere utile nella tua app una volta che i controlli saranno più coinvolti.

prendere come sguardo a questa possibile soluzione, con un po 'di formattazione aggiunto: http://jsfiddle.net/tLfYt/

Penso che il modo più semplice per risolvere questo richiede: - Conservare l'indice 'selezionato' portata - Bind ng-click a ogni intervallo ripetuto e utilizzarlo per aggiornare l'indice.

Da lì, puoi fare esattamente come hai proposto: aggiorna il modello sui tuoi ingressi. Questo modo di pensare dichiarativo è qualcosa che amo di Angular - la tua applicazione può fluire nel modo in cui pensi logicamente al problema.

nel controller:

$scope.selectedObjectIndex = null; 

$scope.selectObject = function($index) { 
    $scope.selectedObjectIndex = $index; 
} 

Nella tua ng-repeat:

<span ng-repeat="widget in chart.object" ng-click="selectObject($index)"> 

I suoi ingressi:

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