Unable to Set Selected Value Of DropDown In angularJs

Question

I have a DropDown. I'm binding it's value using ng-repeat on Option. I want to Set the selected value using the value field only .

This is My code.

<div ng-controller="myCtrl">
    <select ng-model="selectedItemvalue">
        <option value="">--Select --</option>
        <option ng-repeat="sel in selectables" value="{{sel.value}}">{{sel.label}}</option>
    </select>
    <p>Selected Value is : {{selectedItemvalue}}</p>
</div>

Js

angular.module('myApp', [])

// controller here
.controller('myCtrl', function($scope) {
    $scope.selectables = [
        { label: 'A', value: 1},
        { label:'B', value: 2},
        { label: 'C', value: 3}
    ];

    // this is the model that's used for the data binding in the select directive
    // the default selected item
    //using value, i want to set the selected value
    $scope.selectedItemvalue = "2"; 
})

My Fiddle

As you can see, I want to set selected value uisng only By setting Value.

Shashank Agrawal · Accepted Answer · 2016-06-28 11:27:24Z

23

You need to use ng-model instead of ng-value to bind it to model.

<select ng-model="selectedItemvalue">

Update: $scope.selectedItem needs to be $scope.selectedItemvalue in controller and then you can use ng-selected to match condition on it

Working Demo

angular
.module('myApp', [])

// controller here
.controller('myCtrl', function($scope) {
    $scope.selectables = [
        { label: 'A', value: 1},
        { label:'B', value: 2},
        { label: 'C', value: 3}
    ];

    // this is the model that's used for the data binding in the select directive
    // the default selected item
    //using value, i want to set the selected value
    $scope.selectedItemvalue = "2"; 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
    <select ng-model="selectedItemvalue">
        <option value="">--Select --</option>
        <option ng-repeat="sel in selectables" ng-selected="selectedItemvalue == sel.value" value="{{sel.value}}">{{sel.label}}</option>
    </select>
 <p>Selected Value is : {{selectedItemvalue}}</p>
</div>

edited Jun 28, 2016 at 11:27

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

answered Jan 27, 2015 at 11:44

A.B

20.5k3 gold badges43 silver badges74 bronze badges

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

9 Comments

Amit Kumar Over a year ago

See the Updated Link. Still Same problem

Amit Kumar Over a year ago

But Intially , second Itme Is not Selected in your Demo,

A.B Over a year ago

you want second item to be selected inititially?

A.B Over a year ago

@AmitKumar see the answer and demo now

Amit Kumar Over a year ago

@AB: yes. It can be any item. Like If I set $scope.selectedItemvalue = "3"; then It will Set Selected Item Whose Value filed Is 3

|

Shashank Agrawal · Accepted Answer · 2015-01-27 11:47:33Z

7

You need to basically use the following syntax for your option tag (use ng-selected):

<option ng-repeat="sel in selectables" value="{{sel.value}}" ng-selected="sel.value == selectedItemvalue">{{sel.label}}</option>

answered Jan 27, 2015 at 11:47

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Comments

Ankit Gupta · Accepted Answer · 2015-01-27 11:54:48Z

0

If you try

$scope.selectedItemvalue = { label:'B', value: 2};

then it will work.

answered Jan 27, 2015 at 11:54

Ankit Gupta

2,6192 gold badges17 silver badges28 bronze badges

2 Comments

Amit Kumar Over a year ago

Hii. No I want to creat object to set Selected Value. I just Want to set using Value field.

Ankit Gupta Over a year ago

then try as <option ng-repeat="sel.value for sel in selectables"

Collectives™ on Stack Overflow

Unable to Set Selected Value Of DropDown In angularJs

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related