How to auto fill up input field in angularjs?

Question

I just want to fill full name input box by inserting first name and last name input box. I just bind the data from above two values in input box, but it does not show in full name input box. Thanks in advance!! Code:

                <div ng-app="myApp" ng-controller="myCtrl">

                First Name: <input type="text" ng-model="firstName"><br>
                Last Name: <input type="text" ng-model="lastName"><br>
                Full Name:<input ng-bind="firstName+" "+lastName>

                    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
      });
       </script>

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2019-01-20 20:51:52Z

You can't use ng-bind directive for HTML attributes, see the documentation.

ng-bind can be used in other HTML tags:

<span ng-bind="firstName + ' ' + lastName"></span>

With the input tag, you can use these directives:

<input type="text"
       ng-model="string"
       [name="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]
       [ng-trim="boolean"]>

However, you can use the curly braces notation in the HTML value attribute:

<input value="{{firstName + ' ' + lastName}}">

Something like this:

(function() {
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
  });
}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> Full Name: <input value="{{firstName + ' ' + lastName}}">
  <span ng-bind="firstName + ' ' + lastName"></span>
</div>

Krack · Accepted Answer · 2019-01-20 19:45:14Z

0

     <div ng-app="myApp" ng-controller="myCtrl">

            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            Full Name:<span ng-bind="fullName"></span>
     </div>

     <script>
          var app = angular.module('myApp', []);
          app.controller('myCtrl', function($scope) {
          $scope.firstName = "John";
          $scope.lastName = "Doe";
          $scope.fullName =  $scope.firstName  + " " + $scope.lastName;
       });
     </script>

answered Jan 20, 2019 at 19:45

Krack

3741 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to auto fill up input field in angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related