Как сделать двухстороннюю привязку данных к определенному элементу в массиве, где индекс массива определяется динамически?

Question

Допустим, у меня есть динамический массив Javascript из базы данных:

customers = [{'id':1, 'name':'John'},{'id':2, 'name':'Tim}, ...]

и входы:

<input type='text' name="forJohnOnly" ng-model="customers[0].name" />

<input type='text' name="forTimOnly" ng-model="customers[1].name" />

Массив поступает из отсортированной базы данных, и Джон всегда является первым элементом. Хотя это работает, мне это не нравится, потому что кто-то может изменить порядок сортировки в базе данных без обновления пользовательского интерфейса, и первый вход теперь содержит имя Тима, что неверно. Этот же массив отправляется обратно на сервер для сохранения в базе данных.

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

<input type='text' name="forJohnOnly" ng-model="customers[where customers.id=1].name" />
<input type='text' name="forTimOnly" ng-model="customers[where customers.id=2].name" />  (need to use id because name can be updated)

Есть идеи?

Обновление:
Пока данные находятся в массиве, текстовые поля не имеют единого макета, такого как сетка.

Answer 1

Напишите функцию, которая получает идентификатор и возвращает объект. Как то так

function getRow(id) {
    customers.forEach(itm => if(itm.id == id){ return itm; });
}

И используйте его в html, как

<input type='text' name="forJohnOnly" ng-model="getRow(customer.id).name" />

Или используя ng-repeat, как это

<div ng-repeat="customer in customers">
    <input type='text' name="{{customer.name}}Only" ng-model="customer.name" />
</div>

И просто сортируйте customers массив по порядку!