Thursday, 28 April 2016

Example : How to use ng-model to maintain and update state on the page ?


<html ng-app>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs
                /angularjs/1.3.3/angular.min.js"></script>
  </head>

  <body>
   <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" 
             placeholder="Enter a name here">

      <label>Age:</label>
      <input type="text" ng-model="yourAge" 
             placeholder="Enter age here">
      <hr />
      <h1>Hello {{yourName}} !!!</h1>
      <h4>Your age is {{yourAge}}</h4>
      <br><br>
      <h3>
                  <u>Arithmetic Operation</u>
      </h3>
      <hr />
      <label>Number1:</label>&nbsp;
      <input type="number" ng-model="num1" 
             placeholder="Enter first number">

      <label>Number2:</label>&nbsp;
      <input type="number" ng-model="num2" 
             placeholder="Enter second number">           <hr />
      <h4>Sum is: {{ num1 + num2 }}</h4>
      <h4>Sub is: {{ num1 - num2 }}</h4>
      <h4>Multiply is: {{ num1 * num2 }}</h4>
      <h4>Div is: {{ num1 / num2 }}</h4>
   </div>
  </body>
</html>

No comments:

Post a Comment

Note: only a member of this blog may post a comment.