Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Difference between ng-model and ng-bind

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 990
    Comment on it

    AngularJS has some built-in directives, and these directives allows us to extend HTML element.
    Here we are going to discuss about the two directive that are used for data binding. One is ng-model and second one is ng-bind
    Data binding is one of the most important feature of AngularJS. And ng-model and ng-bind are frequently used directives for that.

    ng-model: It is used for two way data binding i.e. from view to model and from model to view. Below example code will explain how to use ng-model with an input tag and how we can bind this with the model.
     

    <!doctype html>
    <html ng-app>   
       <head>
          <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
       </head>
    
       <body>
          <div>
             <label>Enter your name:</label>
             <input type = "text" ng-model = "username" placeholder = "Enter Your name">
             <br />         
             <h1>Hello {{username}}!</h1>
          </div>      
       </body>
    </html>

    ngModel can be used with controls like checkbox, text as these controls have value attribute.ng-model uses formatters to modify the data.

    ng-bind: It is also used for data binding but the difference is that it supports one-way data binding i.e. from model to view.It binds only the text content not the value that is why ng-bind is used where we need to display the data
    The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

    <!doctype html>
    <html ng-app>   
       <head>
          <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
       </head>
          
       <body>
          <div>
             <label>Enter your name:</label>
             <input type = "text" ng-model = "username" placeholder = "Enter Your name">
             <br />         
             Hello <span ng-bind="username"></span>!
          </div>      
       </body>
    </html>

    ng-bind can not be used with input tag, we can use it with span or div tag. ngBind uses filters to modify the data.
    For Example:
     

    <span ng-bind="username | uppercase"></span>
    
    or
    
    <span>{{username | uppercase}}</span>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: