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

Я создаю приложение 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']"/>

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

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

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

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

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

Ответ 1

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

Взгляните на это возможное решение, добавив немного форматирования: http://jsfiddle.net/tLfYt/

Я думаю, что самый простой способ решить это требует: - Сохранить "выбранный" индекс в области - Привяжите ng-click к каждому повторному интервалу и используйте это, чтобы обновить индекс.

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

В вашем контроллере:

$scope.selectedObjectIndex = null;

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

В вашем ng-repeat:

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