Как сделать динамическую модель ng?

Question

Я делаю динамическую регистрационную форму Пример моей динамической формы .Данные, записанные в этих входных данных, будут позже отправлены в некоторый API.

<div ng-repeat="item in CustomRegistrationForm" class="form-group text-field-para" style="margin: 10px">
     <input type="{{item.Type}}" id="{{'A'+$index}}" class="form-control" name="{{TmpName}}" ng-model="RegistationSubscriberData.User.CustomRegistrationForm[$index].Name">
</div>

CustomRegistration - это JSON, созданный следующим образом: https://jsoneditoronline.org/?id=5396efadcf9d475a9fee6e558e8b807c.По моей логике ng-модели должны быть установлены (в моем случае) как: «FirstName», «Email», «GSMnumber», ... Но он просто сохраняется как последняя строка в ng-модели в мой случай"Имя".Я пытался использовать item.Name, но это не имело никакого значения.Также, если я попытался «console.log (CustomRegistration [0] .Name)», он работал отлично и вывел «FirstName»

Может кто-нибудь объяснить мне, почему в этом случае мой «тип» работает отлично (динамически)но ng-модель не может работать с динамической переменной.Это мой первый вопрос, поэтому, если я допустил какие-либо ошибки, заранее прошу прощения.

Answer 1

Вы должны создать массив для ng-модели , затем вы можете динамически добавить в этот массив, как показано ниже.

<div ng-app ng-controller="TestController">
    <div ng-repeat="item in CustomRegistrationForm" class="form-group text-field-para" style="margin: 10px">
         <input type="{{item.Type}}" id="{{'A'+$index}}" class="form-control" name="{{TmpName}}" ng-model="Users[item.Name]">
    </div>
    <p> {{Users}} </p>
</div>

В контроллере

function TesyController($scope) {

    $scope.RegistationSubscriberData = {};

        $scope.CustomRegistrationForm = [
  {
    "Label": "First name",
    "Name": "FirstName",
    "Type": "text",
    "Mandatory": true,
    "Length": 20,
    "showPlaceHolder": false,
    "Regex": "/^[a-z ,.'-]+$/i",
    "Validator": "",
    "requireRetypePassword": false,
    "strengthValidatorEnabled": false,
    "strengthComplexityLevel": false,
    "Format": ""
  },
  {
    "Label": "Email",
    "Name": "Email",
    "Type": "email",
    "Mandatory": true,
    "Length": "",
    "showPlaceHolder": false,
    "Regex": "",
    "Validator": false,
    "requireRetypePassword": false,
    "strengthValidatorEnabled": false,
    "strengthComplexityLevel": false,
    "Format": ""
  },
  {
    "Label": "Phone number (international format)",
    "Name": "GSMNumber",
    "Type": "text",
    "Mandatory": false,
    "Length": "",
    "showPlaceHolder": false,
    "Regex": "/^[a-z ,.'-]+$/i",
    "Validator": "",
    "requireRetypePassword": false,
    "strengthValidatorEnabled": false,
    "strengthComplexityLevel": false,
    "Format": ""
  },
  {
    "Label": "Password",
    "Name": "password",
    "Type": "password",
    "Mandatory": true,
    "Length": "",
    "showPlaceHolder": false,
    "Regex": "",
    "Validator": false,
    "requireRetypePassword": true,
    "strengthValidatorEnabled": true,
    "strengthComplexityLevel": false,
    "Format": ""
  }
]
}

Для справки вы можете обратиться к ссылочным ссылкам ниже

fiddle fiddle 2

Надеюсь, это поможет вам.