Angular Js with input tag example

In this example, we see , how to create multiple input text fields and bind with angular js properties


<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here"><br>
      <label>City:</label>
      <input type="text" ng-model="city" placeholder="Enter a city here"><br>
      <label>Country:</label>
      <input type="text" ng-model="country" placeholder="Enter a country here">
      <hr>
      <h1>Hello<i> {{yourName}}</i></h1>
      <br> Lives in {{city}} , {{country}}.
    </div>
  </body>
</html>

Output:

<html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"><br> <label>City:</label> <input type="text" ng-model="city" placeholder="Enter a city here"><br> <label>Country:</label> <input type="text" ng-model="country" placeholder="Enter a country here"> <hr> <h1>Hello<i> {{yourName}}</i></h1> <br> Lives in {{city}} , {{country}}. </div> </body> </html>

Reference:

https://angularjs.org

Onlinecodegeek

Angular Js with input tag example

0 comments :