How to set select option explicitly in angualrjs

Question

0.00/5 (No votes)

See more:

Hello everyone,
I am working on a code and got stuck at one point.Since i am new to angularjs i need some guidance.
What i am trying to do is that i want to display some values from database on the UI. In order to fetch data from db i had used web service which return some data.I want to display that value as a selected value on the combo box on ui.
Here i am sharing the piece of code of both Html page and that of js.
Thanxs in advance.

What I have tried:

What i have tried till now is

******html code****

HTML

<select name="userType" id="userType" class="form-control"
    ng-model="user.UserType" required>
    <option value="">-Select option-</option>
                                        
    <option ng-repeat="UT in UserTypes" value="{{UT.Id}}" ng-selected="{{ UT.Selected == true }}">
        {{UT.Name}}
    </option>
</select>

****Js Code********

JavaScript

 $scope.UserTypes = [{
        Id: 1,
        Name: 'Admin',
        Selected: false
    }, {
        Id: 2,
        Name: 'Doctor',
        Selected: false
    }, {
        Id: 3,
        Name: 'Receptionist',
        Selected: false
    }, {
        Id: 4,
        Name: 'Nurse',
        Selected: false
    }, {
        Id: 5,
        Name: 'Staff',
        Selected: false
    }];


angular.forEach($scope.UserTypes, function (value, key) {
    alert(value.Id + " ," + $scope.user.UserType);
    if (value.Id == $scope.user.UserType) {
        value.Selected = true;
        alert("true");
    }
});

************************

Posted 1-Apr-16 20:09pm

tishi208

Updated 10-May-16 20:16pm

Konstantin A. Magg

v5

Add a Solution

2 solutions

Solution 1

Hey Tishi,

shouldn't be that hard to get your code working. Have a look at the docs at https://docs.angularjs.org/api/ng/directive/select[^]:

Instead of options, I'd recommend using Angular's ng-options. Otherwise you have to take care yourself, that the options are created bevor an initial value is selected.
The select element binds the selected value to ng-model. Further annotations in the options are not needed.

A possible HMTL sample could look like this:

HTML

<select name="userType" id="userType" class="form-control" ng-model="SelectedType" 
    required ng-options="type.Name for type in UserTypes">
</select>
<p>
    Selected Instance: {{SelectedType}}
</p>

The selected object is bound to $scope.SelectedType

JavaScript

// Test initial value
$scope.SelectedType = $scope.UserTypes[2];

If you just need the selected user type, you could work with $scope.SelectedType. Otherwise you could implement an ng-change function (see the docs again) and e.g. set the selected property.

In general, I'd ask, whether it is good design to have a selected property inside the UserType data. But this goes beyond what you described above.

Hope this helps. If you have further questions, let me know.
– K.

Posted 5-Apr-16 11:12am

Konstantin A. Magg

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Anil Vaghasiya · Accepted Answer · 2016-05-10T20:16:00

Hello,
Just Implement the Below Code:
and you need to return id instead of selected.

HTML

<select name="userType" id="userType" class="form-control">
    ng-model="user.UserType" required>
    <option value="">-Select option-</option>
                                        
    <option ng-repeat="UT in UserTypes" value="{{UT.Id}}" ng-selected="UT.Id==user.UserType">
        {{UT.Name}}
    </option>
</select>

Java

angular.forEach($scope.UserTypes, function (value, key) {
    alert(value.Id + " ," + $scope.user.UserType);
    if (value.Id == $scope.user.UserType) {
         $scope.user.UserType= value.Id
    }
});

How to set select option explicitly in angualrjs

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How to set select option explicitly in angualrjs

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us