0

I want to make a form for user that can fill in their first name and second name.

I want to use angularjs. But I don't know how to bind two different input to one line. I tried this code without any success.

<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>
Artjom B.
  • 61,146
  • 24
  • 125
  • 222
user3360123
  • 99
  • 10

2 Answers2

1

How about:

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

ng-bind must contain an Angular expression (optionally you can add an Angular filter after the '|' delimiter).

Angular Expressions

Angular expressions are like JavaScript expressions with the following differences:

  • Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.
  • Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression
    evaluation is forgiving to undefined and null.
  • No Control Flow Statements: you cannot use the following in an Angular expression: conditionals, loops, or exceptions.
  • Filters: You can use filters within expressions to format data before displaying it.
Vlad
  • 1,723
  • 12
  • 16
0
<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>
Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Nikhil Bhanda
  • 11
  • 2