Working with ng-model

9 Sep by vichu

Working with ng-model

Reading Time: 5 minutes

In the previous blog, we saw the ng-bind directive, or its equivalent double-curly {{ }} notation, which allowed us to take the data from our controllers and display it in the UI. That gives us our one-way data-binding, which is powerful in its own regard. But most applications we develop also have user interaction, and parts where the user has to feed in data. From registration forms to profile information, forms are a staple of web applications, and AngularJS provides the ng-model directive for us to deal with inputs and two-way data-binding:

See the Pen simple ng-model by Vishal Srinivasan (@vishal_srini) on CodePen.0



In this example, we define a controller with a variable exposed on its instance called username. Now, we get its value out into the HTML using the ng-controller and the double-curly syntax for one-way data-binding. What we have introduced in addition is an input element. It is a plain text box, but on it we have attached the ng-model directive. We pointed the value for the ng-model at the same username variable on the MainCtrl. This accomplishes the following things:

  • When the HTML is instantiated and the controller is attached, it gets the current value (in this case, nothing as a string) and displays it in our UI.
  • When the user types, updates, or changes the value in the input box, it updates the model in our controller.
  • When the value of the variable changes in the controller (whether because it came from the server, or due to some internal state change), the input field gets the value updated automatically.

The beauty of this is twofold:

  • If we need to update the form element in the UI, all we need to do is update the value in the controller. No need to go looking for input fields by IDs or CSS class selectors; just update the model.
  • If we need to get the latest value that the user entered into the form or input to validate or send to the server, we just need to grab it from our controller. It will have the latest value in it.

Now let’s add some complexity, and actually deal with forms. Let’s see if we can bring this concept together with an example:

See the Pen ng-model simple example by Vishal Srinivasan (@vishal_srini) on CodePen.0

We introduced one more input field, which is bound to a field called password on the controller’s instance. And we added two buttons:

  • The first button, Change Values, is to simulate the server sending some data that needs to be updated in the UI. All it does is reassign the values to the username and password fields in the controller with the latest values.
  • The second button, Submit, simulates submitting the form to the server. All it does for now is log the value to the console.

The most important thing in both of these is that the controller never reached out into the UI. There was no jQuery selector, no findElementById, or anything like that. When we need to update the UI, we just update the model fields in the controller. When we need to get the latest and greatest value, we just grab it from the controller. Again, this is the AngularJS way.

Now you understood how to write a basic AngularJS application. Learning without implementation is waste. So I am giving the following assignment and before reading the next tutorial kindly finish this.

Create a simple AngularJS form for getting registration details of your own company. The following fields are must: name, emailId, date of birth, some comments section like “What made you to register here?”. You can addup whatever you want in the registration form. In the end when user hits submit, all the details need to be shown in a popup (alert box or as a text message, Styles are not the primary motive).

Send your assignment to vishal@vishalsrini.com. The best one will be shown with their details in our website.



Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

Your email address will not be published. Required fields are marked *