Итерация ng-модели? Является ли это возможным?

Question

Я хотел бы сделать цикл, который может автоматически инициироваться сначала пустыми значениями на входе, а затем дополнять их последовательно. Однако я не знаю, как это сделать в angularjs, используя ng-модель. Ну, у меня есть HTML-файл

<input type="text" id="pin" ng-model="inputData.pin" />
 <input type="text" id="pin2" ng-model="inputData.pin2" />

И я бы контроллер вместо того, чтобы писать

$scope.inputData = { pin : '' };
$scope.inputData = { pin2 : '' };

для автоматической петли

for (var key in receivedData) {
                for (var detailKey in receivedData[key]) {
                    $scope.inputData = { detailKey : '' };
                }
            }

когда detailKey находится в последовательности pin, pin2.

В настоящее время это не работает. кто нибудь знает как это сделать? Заранее спасибо за помощь:)

Answer 1

Похоже, вы неправильно поняли, как присвоить значение объекту - вы должны обращаться с ним как с ассоциативным массивом.

В вашем примере вы переопределяете всю собственность $scope.inputData в каждой итерации, давая ему литерал объекта, который имеет один ключ detailKey значение которого является пустой строкой ('').

Вместо этого вы хотите определить новое свойство объекта, а не "перезаписать" сам объект:

for (var key in receivedData) {
    for (var detailKey in receivedData[key]) {
        $scope.inputData[detailKey] = '';
    }
}

Затем вы можете перебирать ключи, представленные в этом объекте в вашем угловом шаблоне, используя ng-repeat директива, принимая каждый ключ от inputData и привязать их значение к <input> элемент. Это создаст n<input> элементы где (n === Object.keys(inputData).length),

<input type="text" class="pin"
       ng-repeat="key in inputData"
       ng-model="inputData[key]" />

Примечание. У вас не может быть идентификатора, который используется более одного раза в одном документе. Я изменил каждый <input> элемент, чтобы иметь вместо него класс 'pin'.

Answer 2

Не могли бы вы просто сделать $scope.inputData = receivedData;?

В настоящее время то, что вы делаете, это переназначение inputData для объекта со статическим ключом detailKey при каждой итерации цикла.