Difference between ng-model and data-ng-model

Question

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

score 71 · Answer 1 · answered Jul 01 '14 at 11:54

71

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

answered Jul 01 '14 at 11:54

AlwaysALearner

43,759
9
96
78

score 13 · Answer 2 · edited Jun 20 '20 at 09:12

13

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:

Strip x- and data- from the front of the element/attributes.

Convert the :, -, or _-delimited name to camelCase.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 01 '14 at 10:33

James Allardice

164,175
21
332
312

Surjeet Bhadauriya · Answer 3 · 2018-10-11T04:57:31.577

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

score 7 · Accepted Answer · answered Jul 01 '14 at 10:44

7

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.

answered Jul 01 '14 at 10:44

sylwester

16,498
1
25
33

It is confusing to me in your explanation about which is the best practice.. is it just `ng-bind`? – Mr_Green Dec 13 '16 at 09:04
you can use both, if you want to have HTML5 valid attribute use data-ng-... – sylwester Dec 13 '16 at 12:38

score 1 · Answer 5 · answered Mar 03 '22 at 16:12

1

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

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

answered Mar 03 '22 at 16:12

jddsm

53
7

score 1 · Answer 6 · answered Mar 03 '22 at 16:24

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:

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

Difference between ng-model and data-ng-model

6 Answers6

Linked