Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between ng-model and data-ng-model

Tags:

angularjs

I am new with the AngularJs. Can anyone say the difference between ng-model and data-ng-model?

With ng-model

First Name  :  <input type="text" ng-model="fname" id="fname">
Second Name :  <input type="text" ng-model="lname" id="lname">  

With data-ng-model

First Name  :  <input type="text" data-ng-model="fname" id="fname">
Second Name :  <input type="text" data-ng-model="lname" id="lname">  
like image 641
Hari Avatar asked Jul 01 '14 10:07

Hari


People also ask

What is the difference between data Ng and Ng?

The difference is simple - there is absolutely no difference between the two except that certain HTML5 validators will throw an error on a property like ng-app , but they don't throw an error for anything prefixed with data- , like data-ng-app .

What is data NG-model?

ngModel is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during validations in a form. We can use ngModel with: input. text.

What is the difference between ngModel and ngValue?

Please note that 'ng-value' does have an advantage over hard-coding to the element attribute 'value', in that you can specify non-string types. For example, 'true' and 'false' will be stored to the model as booleans, rather than as strings. Also ngValue is a one-way binding, and ngModel is a two-way binding.

What is [( ngModel )]?

Angular NgModel is an inbuilt directive that creates a FormControl instance from the domain model and binds it to a form control element. The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data. We can merely achieve it in the component element and the HTML element both.


2 Answers

while both ng-model and data-ng-model would work, HTML5 expects any custom attribute to be prefixed by data-.

<!-- not HTML5 valid --> <input type="text" ng-model="name">  <!-- HTML5 valid --> <input type="text" data-ng-model="name"> 
like image 71
AlwaysALearner Avatar answered Oct 11 '22 14:10

AlwaysALearner


They are the same. Angular strips the data- part from the attribute. From the docs:

Angular normalizes an element's tag and attribute name to determine which elements match which directives... The normalization process is as follows:

  1. Strip x- and data- from the front of the element/attributes.
  2. Convert the :, -, or _-delimited name to camelCase.
like image 33
James Allardice Avatar answered Oct 11 '22 13:10

James Allardice