CODEWITHSUNDEEP
javascriptangularjsui-select2
Salman
Salman

Reputation: 1286

ui select 2 selected value doesnt change - angularjs

i m using ui.select2 for dropdowns

Scenario i have an ajax call that return drop down values 

document.dropDownDocStatuses = [
            { key: 0, value: 'All active (' + response.totalDocuments + ')' },
            { key: 1, value: 'Draft (' + response.draft + ')' }            
        ];

in html i have 

<select ui-select2 class="form-control font-12px input-style3 " 
ng-model="document.dropDownDocStatus"        
ng-change="document.filterDocuments()">
<option ng-repeat="documents in document.dropDownDocStatuses"  value="{{documents.key}}">({{documents.value}})</option>  </select>

user have selected value enter image description here

Issue now when i update any value of dropdown using 

  _document.dropDownDocStatuses[_document.dropDownDocStatus].value++;
                _document.dropDownDocStatuses[1].value++;

valuge gets updated but it doesnt change selected value text whereas if i click on dropdown i get changed value in dropdown enter image description here

can someone guide me how can i fix the issue, any help will be appreciated

Upvotes: 2

Views: 5534

Answers (1)

Russell Kwok
Russell Kwok

Reputation: 31

i have just come across the same issues as yours, and the root cause is the ng-model field, which you should not use the "options" field to store the ng-model, try to create another field for ng-model, and you will be able to select the value.

e.g.

document.dropDownDocStatuses = [
            { key: 0, value: 'All active (' + response.totalDocuments + ')' },
            { key: 1, value: 'Draft (' + response.draft + ')' }            
        ];
document.selectedDocStatus = [];

and in HTML:

<select ui-select2 class="form-control font-12px input-style3 " 
ng-model="document.selectedDocStatus"        
ng-change="document.filterDocuments()">
<option ng-repeat="documents in document.dropDownDocStatuses"  value="{{documents.key}}">({{documents.value}})</option>  </select>

then you should be able to select the value successfully.

Upvotes: 3

Related Questions