Menu
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.
848
The Id property is assigned to the value attribute and the Name property is set as inner HTML for the option element. In order to set an option as selected, you will need to use the ng-selected directive and assign it a Boolean expression.
AngularJS ng-selected DirectiveThe ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
To set select option selected in reactive form we can use setValue and patchValue of FormGroup . The setValue sets the value in each and every form control of FormGroup . We cannot omit any form control in setValue but when we want to assign only few form controls of FormGroup then we need to use patchValue .
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>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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
