show angularjs dropdown selected value

Question

I am adding employee with designation field in dropdown (say 'Employee'). When I try to edit the profile of employee in another page the designation should display the pre-selected dropdown value with remaining values below.(the selected designation is not displaying first. it is shown as normal dropdown) I have tried selected="selected"

<select class="form-control edited" id="designation_edit"  name="designation_edit" ng-model="designation_edit">
       <option value="HR" selected="selected">HR Executive</option>
       <option value="Manager">Manager</option>
       <option value="Employee">Employee</option>
       <option value="Admin">Admin</option>
</select>

I have two modal boxes in my page. One for "add employee" and another for edit profile. When I add an employee with designation value from drop-down as employee, this selected value should be displayed first in edit page 'designation' drop-down with remaining values in the dropdown. But currently, it is showing as normal dropdown in edit profile page. I need to fetch the selected value from add page and display here.

Help me to come out with this in angularjs.

Is it correct to add the below line in ajax call

$('#designation_edit').attr("selected":"selected");

I have tried:

$('#designation_edit').append('Designation Manager Employee Admin');

jitender · Accepted Answer · 2017-11-08 09:13:44Z

2

Simple way

If you have a Users as response or a Array/JSON you defined, First You need to set the selected value in controller, then you put the same model name in html. This example i wrote to explain in easiest way. Simple example Inside Controller:

$scope.Users = ["Suresh","Mahesh","Ramesh"]; 
$scope.selectedUser = $scope.Users[0];

Your HTML

<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>

complex example Inside Controller:

$scope.JSON = {
       "ResponseObject":
           [{
               "Name": "Suresh",
               "userID": 1
           },
           {
               "Name": "Mahesh",
               "userID": 2
           }]
   };
   $scope.selectedUser = $scope.JSON.ResponseObject[0];

Your HTML

<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>

edited Nov 8, 2017 at 9:13

jitender

10.4k1 gold badge21 silver badges49 bronze badges

answered Nov 8, 2017 at 9:11

UserCoder1234

493 bronze badges

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

1 Comment

Vinotha Over a year ago

The dropdown is appearing as normal. The selected value in add page is not displaying

skdonthi · Accepted Answer · 2017-11-08 11:08:54Z

1

To show selected value you can do as follows

Controller

assign a default value to the ng-model

 $scope.empDesignationMapping = {
     employee1 : "manager",
     employee2 : "HR",
     employee3: "Admin"
 }
$scope.designation_edit = $scope.empDesignationMapping[employee1] // should be dynamic employee

HTML

<select ng-model="designation_edit" ng-selected="designation_edit" >

after that whenever you select something something it will show as selected.

edited Nov 8, 2017 at 11:08

answered Nov 8, 2017 at 10:19

skdonthi

1,4721 gold badge22 silver badges38 bronze badges

8 Comments

Vinotha Over a year ago

I have tried with this but it is displaying the selected value as "manager" for all other employees selected with other designation types. What shall I do to overcome this?

skdonthi Over a year ago

form a hashObject (key-value pair) like { employee : designation } whenever you get the employee pass it to hashObject[employee] you will get your designation

Vinotha Over a year ago

Can't able to get.. Can u explain how to?

skdonthi Over a year ago

I have edited my answer above, can you please check that and tell me what you needed.

Vinotha Over a year ago

I have already added an employee as HR , but his designation is shown as "Manager" selected. I have tried with your answer.

|

Collectives™ on Stack Overflow

show angularjs dropdown selected value

2 Answers 2

1 Comment

Controller

HTML

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Controller

HTML

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related