CODEWITHSUNDEEP
angularjsjquery-select2
JIJOMON K.A
JIJOMON K.A

Reputation: 1280

Select 2 Label is not changed using Angularjs

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.

enter image description here

Upvotes: 0

Views: 481

Answers (3)

JIJOMON K.A
JIJOMON K.A

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

Rashmi HazeL ivy DorisFay
Rashmi HazeL ivy DorisFay

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

Faraz Javed
Faraz Javed

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

Related Questions