Filling inputs based on selected option in AngularJS

Question

I've 3 input fields the first field is of type select and the remaining two are of type text. Now if I select a value from dropdown list, then the corresponding values should appear in the remaining two input fields. How to do it in AngularJS. Thank you!

For example if I select User1 from the dropdown then User1 corresponding email & phone number should appear in the corresponding input fields.

NOTE: the values are fetched from the database based on the selected option

<select>
    <option value="user1">User1</option>
    <option value="user2">User2</option>
    <option value="user3">User3</option>
    <option value="user4">User4</option>
</select>
<input type="text" id="eamil" placeholder="Email">
<input type="text" id="phone_no" placeholder="Phone number">

I don't have any idea on how to achieve this, so please let me know the way — Naresh
– Naresh, Commented Sep 30, 2016 at 13:00

MSH · Accepted Answer · 2016-09-30 13:07:25Z

2

<select ng-options="s as s in Users" ng-model="user" ng-change = "GetData(user)">

<input type="text" id="eamil" placeholder="Email" ng-model="userEmail">

<input type="text" id="phone_no" placeholder="Phone number" ng-model="userPhone">

Now on controller

$scope.GetData = function(user){
  // Here Please add Code to fetch the data from database. Here userEmailFromDB and userPhoneFromDB are the values that you get from database. 

   $scope.userEmail = userEmailFromDB; 
   $scope.userPhone = userPhoneFromDB;
}

answered Sep 30, 2016 at 13:07

MSH

3991 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Naresh Over a year ago

I'm using MySQL ang PHP for the backend. How can I fetch the values and assign them to $scope.userEmail & $scope.userPhone?

MSH Over a year ago

Have you written any SQL queries to get data based on the user?

Naresh Over a year ago

Yes I've written the query in php file

MSH Over a year ago

Can i see the code from the php file? What is the function name , what parameters does it take and what does it return.

Naresh Over a year ago

I got it, I use http.get to fetch the results from my database. Thanks man.

|

Murali · Accepted Answer · 2016-09-30 13:10:45Z

1

$scope.userListSelected = function(userList){ $scope.email = userList.email; $scope.phoneNumber = userList.phoneNumber;

<select ng-model="userList" ng-options="user.name for user in userData" ng-change="userListSelected(userList)">

<input type=text ng-model="email" />
<input type=text ng-model="phoneNumber"/>

edited Sep 30, 2016 at 13:10

answered Sep 30, 2016 at 13:03

Murali

636 bronze badges

Comments

Kerisnarendra · Accepted Answer · 2016-09-30 13:11:08Z

0

I have something like this, may it helps:

$scope.onChangeSelectedUser = function(item) {
  $scope.user.user_id = item.id;
}
    
$scope.selectedUser = [];

<select class="form-control with-search" select-picker data-live-search="true" title="Select User" ng-model="selectedUser"
ng-options="u as u.email for u in users"
ng-change="onChangeSelectedUser(selectedUser)">
</select>

<input type="text" readonly class="form-control" ng-model="selectedUser.user_id"/>        
<input type="text" readonly class="form-control" ng-model="selectedUser.email"/>
<input type="text" readonly class="form-control" ng-model="selectedUser.phone_no"/>

edited Sep 30, 2016 at 13:11

answered Sep 30, 2016 at 13:05

Kerisnarendra

9239 silver badges14 bronze badges

Collectives™ on Stack Overflow

Filling inputs based on selected option in AngularJS

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related