How to select dynamic select option value using angular js

Question

<select  class="select" data-ng-model="sites.webSites.addable.languages"
ng-options="language as language.label for language in languages" >
                                                    </select>

$scope.languages = [
             {
                 value : 'lang_en',
                 label : 'English-en'
             },
             {
                 value : 'lang_es',
                 label : 'Spanish-es'
             },
             ];

Clicking on a button I have to make the item selected

I have tried like this

var sitevalue = 'lang_es'//dynamic

$('.select').val(sitevalue);

But it is not working ,please suggest.

2ooom · Accepted Answer · 2014-09-09 10:45:35Z

Change your select to something like this:

<select data-ng-model="sites.language"
    ng-options="language.value as language.label for language in languages" ></select>

Then this should work inside your controller:

sites.language = 'lang_es'

Here is a working jsfiddle

Update:

When you are writing language as language.label for ... you are telling angular to map ng-model to object like { value : '...', label : '...' }. Which would be tracked per reference, means you have to assign to ng-model exacltly the same instance that you specified. Here is jsfiddle from angular team illustrating this.

You can use simple assignments to value propery to cange selected value by using this inside ng-options: language.value as language.label for ...

And you don't want to write jquery selectors or manipulate DOM, try avoid $('.select').val(sitevalue); when using angular. Use native js-models instead and rely on framework to do the rest.

Nikolas · Accepted Answer · 2014-09-09 10:30:08Z

Your model should be set to the exact object (by reference) that you would like to select, not only to the value.

Make you HTML like this:

  <body ng-controller="TestCtrl">
    <select  class="select" ng-options=" language.label for language in languages" ng-model="selectedValue"></select>
    <button ng-click="selectedValue = defaultValue">Select Default</button>
  </body>

and your controller like this:

function TestCtrl($scope) {
  $scope.languages = [
   {
       value : 'lang_en',
       label : 'English-en'
   },
   {
       value : 'lang_es',
       label : 'Spanish-es'
   },
   ];
   $scope.selectedValue = {};
   $scope.defaultValue = $scope.languages[1];
}

This will do the job. Working plunkr: http://plnkr.co/edit/8HrQUGMx4jGmJv3fbdDq?p=preview

Kalhan · Accepted Answer · 2014-09-09 10:20:43Z

0

$scope.sites.webSites.addable.languages = 'lang_es';

selected value is associated with data-ng-model

answered Sep 9, 2014 at 10:20

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Comments

Steve Lang · Accepted Answer · 2014-09-09 10:25:35Z

0

ng-options should be "language.value as language.label for language in languages".
data-ng-model (or just ng-model) should be "selectedLanguageValue".
In the controller, get the value of $scope.selectedLanguageValue.

answered Sep 9, 2014 at 10:25

Steve Lang

5594 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to select dynamic select option value using angular js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related