AngularJS: ng-модель внутри ng-repeat?

Я пытаюсь генерировать входные данные формы с помощью ng-repeat. Примечание: 'customFields' представляет собой массив имен полей: ["Возраст", "Вес", "Этническая принадлежность"].

 <div class="control-group" ng-repeat="field in customFields">
   <label class="control-label">{{field}}</label>
     <div class="controls">
       <input type="text" ng-model="person.customfields.{{field}}" />
     </div>
 </div>

Каков наилучший/правильный способ установить «ng-модель»? Я хотел бы отправить его на сервер как person.customfields.'fieldname', где имя поля происходит от «поля в customFields».


angularjs angularjs-directive angularjs-ng-repeat
person 502502    schedule 25.07.2013    source источник

Ответы (4)


arrow_upward
29
arrow_downward 

<div ng-app ng-controller="Ctrl">
    <div class="control-group" ng-repeat="field in customFields">
        <label class="control-label">{{field}}</label>
        <div class="controls">
            <input type="text" ng-model="person.customfields[field]" />
        </div>
    </div>
    <button ng-click="collectData()">Collect</button>
</div>

function Ctrl($scope) {
    $scope.customFields = ["Age", "Weight", "Ethnicity"];
    $scope.person = {
        customfields: {
            "Age": 0,
                "Weight": 0,
                "Ethnicity": 0
        }
    };

    $scope.collectData = function () {
        console.log($scope.person.customfields);
    }
}

Вы можете попробовать это здесь.

Обновлено:

Для проверки хитрость заключается в том, чтобы поместить <ng-form> внутрь повторителя. Пожалуйста, попробуйте.

person zs2020    schedule 25.07.2013
comment
Я расширил jsfiddle, включив требуемую проверку поля, но это не работает.. у вас есть идеи, как заставить это работать? Предполагая, что все поля необходимы только для примера; может быть прочитан из модели, но это не имеет отношения к иллюстрации проблемы. Это очень похоже на связанная с моей проблемой (в которой, кроме того, есть более гибкое настраиваемое поле «путь») - person vorburger; 26.07.2013
comment
@vorburger Обновлено. Пожалуйста, попробуй. - person zs2020; 26.07.2013
comment
Это работает - ты гений!! ;) Однако я заметил, что вы 1. переключились на вложенную ng-форму и 2. исправлено экранирование в ng-show с помощью myForm['\{\{field\}\}'].$error.required. .. из любопытства я отменил 1. и сохранил 2., и он все еще работает - я что-то упускаю? PS: я обновлю свою связанную проблему. - person vorburger; 26.07.2013
comment
@vorburger Я использую Safari. Не выполняя № 1, я увидел 3 предупреждения одновременно. Возможно, это работает в других браузерах. - person zs2020; 26.07.2013
comment
да, наверное (я пробовал в Chrome). PS: Как показывает мой Fiddle #7, проблема остается, если тип ввода динамический. .. - person vorburger; 26.07.2013
comment
Благодарю вас! Это то, что мне было нужно! Очень признателен :) - person 502502; 26.07.2013
comment
Обратите внимание, что требуется оборачивать каждый вход в <form />, потому что AngularJS (начиная с версии 1.1.5) не разрешает атрибут name для текущей области. Таким образом, он прикрепляет ввод к контроллеру формы как {{field}}, а не вычисляет {{ field }} к фактическому имени поля. - person nre; 05.08.2013

arrow_upward
6
arrow_downward

Так должно быть:

<input type="text" ng-model="person.customfields[field]" />
person Ajay Beniwal    schedule 25.07.2013
comment
Вам нужно создать $scope.person = { customfields: {} }; @Finnayra - person holographic-principle; 26.07.2013
comment
Спасибо @finishingmove - person 502502; 26.07.2013

arrow_upward
4
arrow_downward

Любой, кто окажется здесь Для ng-model внутри ng-repeat

http://jsfiddle.net/sirhc/z9cGm/

в приведенной выше ссылке есть хорошее описание того, как ее использовать с примерами

person Akr    schedule 27.10.2013
comment
Вы должны описать решение. - person smartmeta; 27.10.2013
comment
Akr действительно должен описать решение, но сам пример jsfiddle Akr абсолютно фантастический и информативный. По сути, привязывайтесь к любому массиву объектов, которые сами содержат нужные объекты. - person jdnew18; 26.04.2017

arrow_upward
-1
arrow_downward

Попробуйте это ng-model="person.customfields."{{field}} Перемещены двойные кавычки

person avi    schedule 25.07.2013
comment
Я не пробовал это, но у меня есть рабочий код для подобного случая. Фильтрация по свойству (имя выбирается из раскрывающегося списка) - person avi; 26.07.2013