Based my previous post about jQuery FetchRow plugin. We are going to fetch one record from database based on the ID we entered and display the result in the other input element but this time I try to achieve it using Angular.

Let's see the following complete client side code. For the server side script we are still using the same code in jQuery FetchRow.

Let's break down the code part by part.

As usual, we have to include Angular JS and define our page as Angular application with this code:

We also need to specify the controller part of our application using this code:

Add ng-model attribute to our input elements so Angular can recognize them.

For the ID field, add the ng-keypress because we want to add an event listener on it so we can fetch the data we need when we press Enter.

Finally we use the following Javascript to achieve the goal. When the Enter key is pressed we will send HTTP request to server side script to retrieve the data in JSON format.

The live demo can be seen there. You can also download the full source code from the following attachment.