Как связать два поля ввода в одном диапазоне

Question

Я хочу сделать форму для пользователя, который может заполнить свое имя и второе имя.

Я хочу использовать угловые. Но я не знаю, как связать два разных ввода в одну строку. Я пробовал этот код без каких-либо успехов.

<form data-ng-app=""> 
    Voornaam: <input type="text" name="firstname" data-ng-model='name1'><br> 
    Achternaam: <input type="text" name="lastname" data-ng-model='name2'><br> 
    <h4>Name: <span style=" text-transform: capitalize;" data-ng-bind='name1; name2' ng-trim='false'> </span></h4> 
</form> 

Answer 1

Как насчет:

<h4>Name: <span style="text-transform: capitalize" data-ng-bind="name1 + ' ' + name2" data-ng-trim="false"> </span></h4> 

ng-bind должен содержать Угловое выражение (необязательно можно добавить угловой фильтр после '|' ограничителя).

Angular Expressions

Угловые выражения как выражения JavaScript со следующими отличиями:

• Контекст: выражения JavaScript оцениваются на основе глобального окна. В Angular выражения вычисляются относительно объекта области видимости.
• Прощание: в JavaScript, пытаясь оценить неопределенные свойства, генерирует ReferenceError или TypeError. В Angular выражение
  Оценка прощает неопределенные и null.
• Нет сообщений о контрольных потоках: вы не можете использовать следующее в выражении с угловым выражением: условные обозначения, циклы или исключения.
• Фильтры: вы можете использовать фильтры в выражениях для форматирования данных перед их отображением.

Answer 2

<form data-ng-app=""> 
    Voornaam: <input type="text" name="firstname" data-ng-model='name1'><br> 
    Achternaam: <input type="text" name="lastname" data-ng-model='name2'><br> 
    <h4>Name: <span style=" text-transform: capitalize;" ng-bind='name1'> </span> -<span style=" text-transform: capitalize;" ng-bind='name2'> </span></h4> 
</form>