Отображение OneToMany на странице AngularJS

Question

Как записать поля ввода на странице AngularJS с отображением Onetomany?

User Class has Name and phone attributes and can have multiple phone numbers.

AngularJS code for fName input field

<input tabindex="10" style="width: 60%;" type="text" ng-model="ctrl.user.fName" placeholder="First Name">

'' '' Код AngularJS для сопоставления телефона - так как это поле OneToMany, поэтому я выбрал List в классе UserТеперь у меня есть 3 входных текстовых поля на странице AngularJS - так, как мне написать ng-модель для того же самого, для первого текстового поля я объявил, как показано ниже, но как насчет второго и третьего текстовых полей - как объявить ng-модель для поля телефона.

<input type="text" ng-model="ctrl.user.phone.phoneNumber" placeholder="Parking #">

Answer 1

, поэтому я смог найти ответ, и, что удивительно, на любом портале доступно не так много материала, касающегося того же.

, поэтому вопрос заключался в том, как использовать сопоставление OneToMany в AngularJS и любом бэкэнде, например Springboot с Hibernate.

У пользователя есть прямые столбцы, такие как Имя, возраст, DOB и т. Д., Но, скажем, у пользователя есть одно отображение с объектом Контакт (который далее имеет номер телефона, адрес электронной почты, контакт экстренной связи и т. Д.)

В Agular мыможет напрямую помещать ng-bind в поле имени, например ctrl.use.name, но для поля phonenumber это было указано ниже:

ctrl.user.contact [0] .phonenumber

Обратите вниманиечто теперь в пользовательском классе вы должны сделать установщик, который принимает массив контактов, таких как этот -

public void setContact (Contact [] contacts) {.... реализация}

, так что теперьв форме пользователя я могу иметь несколько объектов контактов, которые будут сохраняться как отношения OneToMany.

Answer 2

Основной ответ - использование *ngFor, но я не уверен, что это лучший подход для вашего варианта использования.

<div *ngFor="number of ctrl.user.phone.phoneNumbers">
  <input type="text" ng-model="number" placeholder="enter a new number">
</div>

Если вы планируете использовать только три числа, это может быть прощепросто чтобы назначить конкретный тип телефона каждому:

<input type="text" ng-model="ctrl.user.phone.homePhone" placeholder="Home #">
<input type="text" ng-model="ctrl.user.phone.cellPhone" placeholder="Cell #">
<input type="text" ng-model="ctrl.user.phone.workPhone" placeholder="Work #">

Наконец, в зависимости от того, какую версию Angular вы используете, вам может оказаться проще реализовать FormControl вместо использования ng-model.