Amit Kumar Amit Kumar - 5 months ago 24
Javascript Question

Unable to Set Selected Value Of DropDown In angularJs

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.

A.B A.B
Answer

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>

Comments