What s the difference between ng-model and ng-bind

Question

I m currently learning AngularJS and am having difficulty understanding the difference between ng-bind and ng-model   Can anyone tell me how they differ and when one should be used over the other

User · Answer

ng-model   ng-model  directive in AngularJS is one of the greatest strength to bind the variables used in application with input components  This works as two way data binding  If you want to understand better about the two way bindings  you have an input component and the value updated into that field must be reflected in other part of the application  The better solution is to bind a variable to that field and output that variable whereever you wish to display the updated value throughoput the application    ng-bind   ng-bind works much different than ng-model  ng-bind is one way data binding used for displaying the value inside html component as inner HTML  This directive can not be used for binding with the variable but only with the HTML elements content  Infact this can be used along with ng-model to bind the component to HTML elements  This directive is very useful for updating the blocks like div  span  etc  with inner HTML content    This example would help you to understand

User · Answer

If you are hesitating between using ng-bind or ng-model  try to answer these questions        Do you only need to display data     Yes  ng-bind  one-way binding  No  ng-model  two-way binding       Do you need to bind text content  and not value      Yes  ng-bind  No  ng-model  you should not use ng-bind where value is required       Is your tag a HTML  lt input gt      Yes  ng-model  you cannot use ng-bind with  lt input gt  tag  No  ng-bind

User · Answer

ngModel The ngModel directive binds an input select  textarea  or custom form control  to a property on the scope   This directive executes at priority level 1   Example Plunker  JAVASCRIPT  angular module  inputExample           controller  ExampleController      scope   function  scope          scope val    1          CSS   my-input       -webkit-transition all linear 0 5s      transition all linear 0 5s      background  transparent     my-input ng-invalid       color white      background  red      HTML   lt p id  inputDescription  gt     Update input to see transitions when valid invalid     Integer is a valid value   lt  p gt   lt form name  testForm  ng-controller  ExampleController  gt       lt input ng-model  val  ng-pattern     d     name  anim  class  my-input           aria-describedby  inputDescription    gt   lt  form gt    ngModel is responsible for    Binding the view into the model  which other directives such as input  textarea or select require  Providing validation behavior  i e  required  number  email  url   Keeping the state of the control  valid invalid  dirty pristine  touched untouched  validation errors   Setting related css classes on the element  ng-valid  ng-invalid  ng-dirty  ng-pristine  ng-touched  ng-untouched  including animations  Registering the control with its parent form    ngBind The ngBind attribute tells Angular 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   This directive executes at priority level 0   Example Plunker  JAVASCRIPT  angular module  bindExample            controller  ExampleController      scope   function  scope         scope name    Whirled          HTML   lt div ng-controller  ExampleController  gt     lt label gt Enter name   lt input type  text  ng-model  name  gt  lt  label gt  lt br gt    Hello  lt span ng-bind  name  gt  lt  span gt    lt  div gt    ngBind is responsible for    Replacing the text content of the specified HTML element with the value of a given expression

User · Answer

We can use ng-bind with  lt p gt  to display  we can use shortcut for ng-bind   model    we cannot use ng-bind with html input controls  but we can use shortcut for ng-bind   model   with html input controls    lt input type  text  ng-model  name  placeholder  Enter Something   gt   lt input type  text  value    name    placeholder  Enter Something   gt    Hello   name    lt p ng-bind  name  lt  p gt

User · Answer

tosh s answer gets to the heart of the question nicely  Here s some additional information      Filters  amp  Formatters  ng-bind and ng-model both have the concept of transforming data before outputting it for the user  To that end  ng-bind uses filters  while ng-model uses formatters   filter  ng-bind   With ng-bind  you can use a filter to transform your data  For example    lt div ng-bind  mystring   uppercase  gt  lt  div gt     or more simply     lt div gt   mystring   uppercase   lt  div gt   Note that uppercase is a built-in angular filter  although you can also build your own filter   formatter  ng-model   To create an ng-model formatter  you create a directive that does require   ngModel   which allows that directive to gain access to ngModel s controller  For example   app directive  myModelFormatter   function       return       require   ngModel       link  function scope  element  attrs  controller         controller  formatters push function value            return value toUpperCase                            Then in your partial    lt input ngModel  mystring  my-model-formatter   gt    This is essentially the ng-model equivalent of what the uppercase filter is doing in the ng-bind example above      Parsers  Now  what if you plan to allow the user to change the value of mystring  ng-bind only has one way binding  from model-- view  However  ng-model can bind from view-- model which means that you may allow the user to change the model s data  and using a parser you can format the user s data in a streamlined manner  Here s what that looks like   app directive  myModelFormatter   function       return       require   ngModel       link  function scope  element  attrs  controller         controller  parsers push function value            return value toLowerCase                              Play with a live plunker of the ng-model formatter parser examples    What Else   ng-model also has built-in validation  Simply modify your  parsers or  formatters function to call ngModel s controller  setValidity validationErrorKey  isValid  function   Angular 1 3 has a new  validators array which you can use for validation instead of  parsers or  formatters   Angular 1 3 also has getter setter support for ngModel

User · Answer

ng-bind has one-way data binding   scope --  view   It has a shortcut    val    which displays the scope value  scope val inserted into html where val is a variable name   ng-model is intended to be put inside of form elements and has two-way data binding   scope --  view and view --   scope  e g   lt input ng-model  val   gt

User · Answer

ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable

User · Answer

x000D   x000D  angular module  testApp      controller  testCTRL  function  scope  x000D                                  x000D    x000D     x000D   scope testingModel    This is ModelData If you change textbox data it will reflected here  because model is two way binding reflected in both    x000D   scope testingBind    This is BindData You can t change this beacause it is binded with html  In above textBox i tried to use bind  but it is not working because it is one way binding                x000D      x000D  div input  x000D  width 600px    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt head gt Diff b w model and bind lt  head gt  x000D   lt body data-ng-app  testApp  gt  x000D       lt div data-ng-controller  testCTRL  gt  x000D          Model-Data    lt input type  text  data-ng-model  testingModel  gt  x000D           lt p gt   testingModel   lt  p gt  x000D             lt input type  text  data-ng-bind  testingBind  gt  x000D             lt p ng-bind  testingBind  gt  lt  p gt  x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

[angularjs] What's the difference between ng-model and ng-bind

Examples related to angularjs

Examples related to angular-ngmodel

Examples related to ng-bind