Связывание данных с определенным элементом массива в Angular

Учитывая структуру данных, которая содержит массив объектов JavaScript, как я могу привязать определенную запись из этого массива к полю ввода с помощью Angular?

Структура данных выглядит следующим образом:

$scope.data = {
    name: 'Foo Bar',
    fields: [
        {field: "F1", value: "1F"},
        {field: "F2", value: "2F"},
        {field: "F3", value: "3F"}
    ]
};

Массив fields содержит несколько экземпляров данной структуры, причем каждая запись имеет как атрибут field, так и атрибут value.

Как связать элемент управления input с атрибутом поля value элемента массива с помощью field F1?

<input ng-model="???"/>

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

Итак, для приведенного выше примера я попытался привязать F1 к одному входу на странице, а F2 - к другому. F3 не будет привязан к элементу управления.

Я видел примеры, в которых функция была использована в ng-model, но она не работает с Angular 1.1.0.

Есть ли еще один умный способ привязать поле ввода к определенной записи массива?

Вот сценарий, который имеет пример, но не работает, поскольку он пытается использовать функцию в атрибуте ng-model: http://jsfiddle.net/nwinkler/cbnAU/4/

Обновление

В соответствии с приведенной ниже рекомендацией, это должно выглядеть так: http://jsfiddle.net/nwinkler/cbnAU/7/

Ответ 1

Я лично реорганизовал массив таким образом, чтобы свойство поля записи массива становилось идентификатором объекта. Mhhh это предложение может показаться странным. Я имею в виду следующее:

$scope.data = {
    name: 'F1',
    fields: {
        F1: {
           value: "1F"
        },
        F2: {
           value: "2F"
        }
    }
};

Если вы хотите связать значение динамически, и это простой и быстрый способ его достижения. Здесь ваша скрипка изменена так, чтобы она произносила слова. http://jsfiddle.net/RZFm6/

Я надеюсь, что это поможет

Ответ 2

Вы можете использовать массив объектов, а не массив строк.

HTML:

<div ng-repeat="field in data.fields">
    <input ng-model="field.val"/>
</div>

JS:

$scope.data = {
    name: 'F1',
    fields: [
        { val: "v1" },
        { val: "v2" }
    ]
};

Я обновил скрипт @Flek здесь: http://jsfiddle.net/RZFm6/6/

Изменить: Извините, просто прочитайте свой вопрос правильно, вы все равно можете использовать массив с:

<label>Bound to F1:</label>
<input ng-model="data.fields[0].value"/>

хотя может остановиться и подумать. Будет ли переменное число полей? или вы делаете заданное количество полей? Используйте массив в первом и объект для последнего.

Ответ 3

Один из способов сделать это - просто добавить необходимые ссылки на область, например:

$scope.fieldF1 = fieldValue('F1');
$scope.fieldF2 = fieldValue('F2');

И затем используйте эти ссылки:

<input ng-model="fieldF1.value"/>
<input ng-model="fieldF2.value"/>

Fiddle: http://jsfiddle.net/cbnAU/5/

Примечание. Я предполагаю, что $scope.data является статическим, но если это происходит динамически, вы всегда можете следить за изменениями в нем и пересчитывать ссылки...