Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
102
rated 0 times [  108] [ 6]  / answers: 1 / hits: 46872  / 10 Years ago, tue, january 27, 2015, 12:00:00

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.


More From » jquery

 Answers
18

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>




[#68074] Saturday, January 24, 2015, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lamarmaximiliand

Total Points: 388
Total Questions: 104
Total Answers: 104

Location: Oman
Member since Fri, Dec 23, 2022
1 Year ago
;