Reputation: 1280
HTML
<select ng-model="Country" id="Country" class="select2" ng-change="viewState()">
<option value=''>Select Country</option>
<option ng-repeat="Country in AllCountry"
ng-value="[[Country.CountryID]]"
value="[[Country.CountryID]]">[[Country.CountryName]]
</option>
</select>
Angulajs
$scope.Country=23;
Problem
When I run this code the value is selected but the label is not changed, I attached the screen shot.
Upvotes: 0
Views: 481
Reputation: 1280
HTML
<ui-select ng-model="CountryScope.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">[[$select.selected.CountryName]]</ui-select-match>
<ui-select-choices repeat="Country in (AllCountry | filter: $select.search) track by Country.CountryID">
<div ng-bind-html="Country.CountryName | highlight: $select.search"></div>
<small ng-bind-html="Country.CountryName | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
AngularJS
$scope.AllCountry=[
{ CountryID: 1, CountryName: 'United States' },
{ CountryID: 2, CountryName: 'Argentina' },
{ CountryID: 3, CountryName: 'Argentina' }
];
To Set Value
$scope.CountryScope.selected= { CountryID: 2, CountryName: 'Argentina' };
To Get Value
$scope.CountryScope.selected.CountryID
Click here for DEMO
Click for Reference
Upvotes: 0
Reputation: 652
Use ng-option instead of option with ng-repeat ...
<select ng-model="Country" id="Country" class="select2" ng-change="viewState()">
<option value=''>Select Country</option>
<option ng-repeat="Country in AllCountry"
ng-value="Country.CountryID"
value="{{Country.CountryID}}">{{Country.CountryName}}
</option>
</select>
Please use angular{{}} instead of [[]] for binding....Hope it will work for you
$scope.Country=22;
$scope.AllCountry = {
"India": {
"CountryName":"India",
"CountryID": 1
},
"USA": {
"CountryName":"USA",
"CountryID": 22
},
"USR": {
"CountryName":"USR",
"CountryID": 2
}
Upvotes: 0
Reputation: 154
The issue occurs when angularjs compares your Country
value with value
attribute inside <option>
i-e <option value="Country.CountryID">
. Country
is number, while option's values are in string
. In short, the issue is with the type mismatch.
The documentation says that
When the model needs to be bound to a non-string value, you must either explictly convert it using a directive (see example below) or use ngOptions to specify the set of options. This is because an option element can only be bound to string values at present.
So you can use ngOptions
to solve the issue, as you can see in the code snippet attached.
<select name="mySelect" id="mySelect"
ng-options="option.CountryID as option.CountryName for option in AllCountry" ng-model="Country">
</select>
Upvotes: 1