CODEWITHSUNDEEP
angularjs
Hari
Hari

Reputation: 371

Difference between ng-model and data-ng-model

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">

Upvotes: 36

Views: 37416

Answers (6)

jddsm
jddsm

Reputation: 51

sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive. Below is an excerpt from that page.

AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.

For example, the following forms are all equivalent and match the ngBind directive:

prefixes

from the AngularJS Directive Documentation

(this helped me understand sylwester's answer, so i figured it might help others too.)

Upvotes: 1

jddsm
jddsm

Reputation: 51

sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive

from the AngularJS Directive Documentation

(this helped me understand sylwester's answer, so i figured it might help others too.)

Upvotes: 1

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

There is no difference between ng-model and data-ng-model if you see in terms of AngularJs.

Actually, 'data' used as prefix to validate HTML5 validation. So, it is good practice to use data-ng-model, however, you can use ng-model as well. There is no problem in that also.

Both have the same meaning and both have the same output:

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">

Upvotes: 9

AlwaysALearner
AlwaysALearner

Reputation: 43947

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">

Upvotes: 72

sylwester
sylwester

Reputation: 16498

Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them.

Upvotes: 7

James Allardice
James Allardice

Reputation: 166001

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.

Upvotes: 13

Related Questions