Dynamiczne wiązanie danych w AngularJS

Question

Buduję aplikację AngularJS i napotkałem problem. Gram w ramy od jakiegoś czasu i muszę jeszcze zobaczyć dokumentację na coś takiego lub na przykład. Nie jestem pewien, którą drogą iść w dół, dyrektywa, modułu, lub coś, co nie słyszeli o jeszcze ...

Problem:

Zasadniczo moja aplikacja pozwala użytkownikowi dodawać obiekty, powiemy przęseł dla tego przykładu, które mają pewne atrybuty, które można edytować: wysokość i powiązaną etykietę. Zamiast każdego span mają własne dedykowane pola wejściowe do manipulacji wysokością i etykietą, chciałbym użyć jednego zestawu pól wejściowych, które są w stanie kontrolować wszystkie iteracje naszego obiektu span.

Moje ok. kod pracy jest coś takiego:

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

Powyższy kod pozwoli użytkownikom dodawanie nowych obiektów, ale interfejs użytkownika jest oczywiście sztywno do pierwszego obiektu w tablicy.

Pożądany Funkcjonalność:

Gdy użytkownik kliknie na obiekcie aktualizuje wartość NG-modelu wejście do wiązania się z obiektem kliknięciu. Więc jeśli kliknięto "object_2", dane wejściowe z aktualizacji modelu ng zostaną zsynchronizowane z wartością obiektu_2. Jeśli użytkownik kliknie "obiekt_4", zaktualizuje model wejściowy ng, pojawi się pomysł. Inteligentny interfejs użytkownika, w zasadzie.

Zastanawiam się nad napisaniem atrybutu dyrektywy o nazwie "sync", który może przekazać status modelu ng do powiązanego interfejsu użytkownika. Chciałem jednak całkowicie stworzyć nowy tag o nazwie <object> i skonstruować go w kontrolerze. I pomyślałem o użyciu ng-click="someFn()", który aktualizuje pola wejściowe. Wszystkie te są "możliwościami", które mają swoje wady i zalety, ale pomyślałem, że zanim albo coś wyrzucę, albo zejdę z niewłaściwej drogi, zapytam społeczność.

Czy ktoś to wcześniej zrobił (jeśli tak, przykłady)? Jeśli nie, jaka byłaby najczystsza metoda AngularJS? Twoje zdrowie.

Answer 1

Nie sądzę, abyś musiał użyć specjalnej dyrektywy specjalnie dla tej sytuacji - chociaż może to być pomocne w Twojej aplikacji, gdy elementy sterujące są bardziej zaangażowane.

Weź Spójrz na to z możliwych rozwiązań, z odrobiną formatowania dodanej: http://jsfiddle.net/tLfYt/

myślę najprostszy sposób na rozwiązanie tego wymaga: - Store „wybrany” indeks w zakresie - Bind NG-kliknięcie do każdego powtarzanego zakresu i użyj go, aby zaktualizować indeks.

Stamtąd można zrobić dokładnie tak, jak proponowałeś: zaktualizuj model na swoich wejściach. Ten sposób myślenia deklaratywnego to coś, co uwielbiam w Angular - Twoja aplikacja może płynąć tak, jak logicznie myślisz o problemie.

W kontrolerze:

$scope.selectedObjectIndex = null; 

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

W swojej NG-repeat:

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

Twoje Wejścia:

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