This article demonstrates nature and behavior of an AngularJS directive ng-model and starts with introduction of this directive. After that, we’ll understand it using a set of examples. At last but not least, it’s two way behavior.
The ng-model Directive
The ng-model directive binds HTML control value to AngularJS application data. To implement this, we use a variable in AngularJS, which holds value of HTML element (input, select, textarea) in association with ng-model directive.
Let’s understand it with an example.
In the above example, we can see a text box, which is bound with AngularJS module “name”.
Hence the output is as below:
Here, we have seen that if we set the value of AngularJS model variable, it is automatically assigned to HTML element value.
Two way behavior
It’s reverse is also possible. i.e.
If we set value of text box then provided value is automatically assigned to AngularJS model variable which can be fetched using AngularJs – Expression or ng-bind Directive.
Let’s see it’s example as well:
On page load, we’ll see the output as below:
But as soon as we change value in text box, statement “Your name is ______” is also changed. See the screenshot below
In this article, I discussed about ng-model and it’s two way behavior. We learnt, how does data flow from HTML to AngularJS and vice versa.
THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.
WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram and LinkedIn