Динамическая привязка данных в AngularJS

Question

Я создаю приложение AngularJS, и у меня возникла проблема. Я некоторое время играл с фреймворком, и мне еще предстоит увидеть документацию для чего-то подобного или каких-либо примеров. Я не уверен, какой путь идти вниз, директива, модуль, или что-то, что я не слышал еще ...

Проблема:

В основном мое приложение позволяет пользователю добавлять объекты, мы скажем промежутки для этого примера, которые имеют определенные атрибуты, которые редактируются: высота и связанная метка. Вместо каждого диапазона есть свои собственные выделенные поля ввода для обработки высоты и метки. Я бы хотел использовать один набор полей ввода, которые могут контролировать все итерации нашего объекта span.

Так что мой ок. рабочий код что-то вроде этого:

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

Приведенный выше код позволит пользователям добавлять новые объекты, но интерфейс явно зашиты на первый объект в массиве.

Желаемая Функциональность:

Когда пользователь нажимает на объект, он обновляет значение нг-модели входных, чтобы связываться с объектом кнопки. Поэтому, если «object_2» щелкнут обновлениями ng-модели ввода для синхронизации с значением object_2. Если пользователь нажимает «object_4», он обновляет ng-модель ввода, вы получаете идею. Умный интерфейс, по существу.

Я думал о написании атрибута директивы под названием «sync», который мог бы подтолкнуть статус ng-модели к связанному пользовательскому интерфейсу. Я хотя бы полностью создал новый тег под названием <object> и построил их в контроллере. И я подумал об использовании ng-click="someFn()", который обновляет поля ввода. Все это «возможности», которые имеют свои плюсы и минусы, но я подумал, что прежде чем я либо что-то скажу, либо пойду по неправильной дороге, я бы попросил сообщество.

Кто-нибудь сделал это раньше (если да, примеры)? Если нет, то какой будет самый чистый способ AngularJS для выполнения этого? Приветствия.

Answer 1

Я не думаю, что вам нужно использовать специальную директиву специально для этой ситуации - хотя это может быть полезно в вашем приложении, когда ваши элементы управления больше задействованы.

Примите, как смотреть на такое возможное решение, с небольшим количеством форматирования добавлено: http://jsfiddle.net/tLfYt/

Я думаю, что самый простой способ решить эту проблему необходимо: - «выбранный» индекс Хранить в объеме - Bind нг-клик на каждый повторный интервал и использовать это для обновления индекса.

Оттуда вы можете сделать то, что вы предложили: обновите модель на входах. Этот способ декларативного мышления - это то, что мне нравится в Angular - ваше приложение может протекать так, как вы логически думаете о проблеме.

В контроллере:

$scope.selectedObjectIndex = null; 

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

В вашей нг-повтора:

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

Ваши входы:

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