What should we use for assigning model data in Angular JS?

Question

I would like to know the better way of assigning model name for each form elements using Angular JS.

I can assign it using individual scope variables.

<input type="text" ng-model="firstName"/>
<input type="text" ng-model="lastName"/>

I can also assign it using singleton object.

<input type="text" ng-model="contact.firstName"/>
<input type="text" ng-model="contact.lastName"/>

Which is the better way of handling form data in terms of memory and execution time?

score 3 · Answer 1 · answered Apr 20 '16 at 13:24

3

You should choose the second option, in order to avoid issue with scope inheritance, see the doc:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope.

answered Apr 20 '16 at 13:24

n00dl3

21,213
7
66
76

1

It's generally always better to use the second format and not reference scope directly. It will help you move to Angular 2 eventually and not pollute the scope. The general rule is that if there's not a dot in it, you're doing it wrong. – Mike Feltman Apr 20 '16 at 13:26

score 0 · Answer 2 · edited May 23 '17 at 10:28

According to Miško Hevery, the creator of AngularJS:

Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong.

The question is why?

Because ng-switch, ng-repeat, etc. creates their own scopes. For example, have a look at this plnkr

      <form ng-submit='addName()'>

          Name 1: <input type='text' ng-model='name'/>
          <input type='submit' value="Submit"/>
      </form>

      <p ng-switch='true'>
          Name 2: <input type='text' ng-switch-when="true"  ng-model='name'/>
      </p>
      <p>
          Name 3: <input type='text' ng-model='name'/>
      </p>

Output:

When you type in the Name 1 text box, the value shows up immediately in all text boxes. This is as expected. The problem is that now when you type into the Name 2 text box, it value gets disconnected and the three box values are no longer in sync. This is because of the way that JavaScript’s prototypal inheritance works.

To avoid, we should use dot in ng-model. For example, have a look at this plnkr

      <form ng-submit='addName()'>

          Name 1: <input type='text' ng-model='contact.name'/>
          <input type='submit' value="Submit"/>
      </form>

      <p ng-switch='true'>
          Name 2: <input type='text' ng-switch-when="true"  ng-model='contact.name'/>
      </p>
      <p>
          Name 3: <input type='text' ng-model='contact.name'/>
      </p>

Output:

Now the code works with all three text box always in sync.

Source:

What should we use for assigning model data in Angular JS?

2 Answers2