for a school project I am creating an application using AngularJS. I am trying to create a dropdown menu that sets the selected language using a button.

JS:

app.controller('NavCtrl',['$scope','$translate', function($scope,$translate){

    $scope.languages = [
        { language: "en", },
        { language: "nl" }
    ];

    $scope.selectedlanguage = $scope.languages[1];

    $scope.ChangeLanguage = function (lang) {
        $translate.use(lang);
    }

}])

HTML:

<div ng-controller="NavCtrl">
    <select ng-model="selectedlanguage" 
            ng-change="option(this.selectedlanguage)" 
            ng-options="i.language for i in languages">
    </select>
    {{selectedlanguage.language}}
    <button class="button button-clear" 
            ng-click="ChangeLanguage('{{selectedlanguage.language}}')">
         Set language
    </button>
</div>

At the moment the button always sets my language to [1] (nl), how do I get it to set the language to the language selected in the dropdown menu?

for a school project I am creating an application using AngularJS. I am trying to create a dropdown menu that sets the selected language using a button.

JS:

app.controller('NavCtrl',['$scope','$translate', function($scope,$translate){

    $scope.languages = [
        { language: "en", },
        { language: "nl" }
    ];

    $scope.selectedlanguage = $scope.languages[1];

    $scope.ChangeLanguage = function (lang) {
        $translate.use(lang);
    }

}])

HTML:

<div ng-controller="NavCtrl">
    <select ng-model="selectedlanguage" 
            ng-change="option(this.selectedlanguage)" 
            ng-options="i.language for i in languages">
    </select>
    {{selectedlanguage.language}}
    <button class="button button-clear" 
            ng-click="ChangeLanguage('{{selectedlanguage.language}}')">
         Set language
    </button>
</div>

At the moment the button always sets my language to [1] (nl), how do I get it to set the language to the language selected in the dropdown menu?

• javascript
• angularjs
• html

Share Improve this question Follow edited Oct 20, 2015 at 13:10 Mike Chamberlain 42.6k2828 gold badges113113 silver badges159159 bronze badges asked Oct 20, 2015 at 12:56 TabsTabs 2311 silver badge33 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

No need to wrap it in {{...}}

<div ng-controller="NavCtrl">
    <select ng-model="selectedlanguage" 
            ng-change="option(this.selectedlanguage)" 
            ng-options="i.language for i in languages">
    </select>
    {{selectedlanguage.language}}
    <button class="button button-clear" 
            ng-click="ChangeLanguage(selectedlanguage)">
         Set language
    </button>
</div>

I can see a few problems.

First, you don't need the this.selectedLanguage in your view, as $scope is automatically assumed as your context:

ng-change="option(selectedlanguage)"

Second, in your controller, you are setting $scope.selectedlanguage to an i, but then binding it to i.language in the view. To fix this, try:

ng-options="i as i.language for i in languages"

The x as y syntax lets you bind x to the model, while showing y for your dropdown label.

https://docs.angularjs/api/ng/directive/ngOptions

Third, as @Matthew Berg points out, you don't need the {{...}} in you click handler:

ng-click="ChangeLanguage(selectedlanguage.language)"

Here's a plunkr with everything working:

http://plnkr.co/edit/YZf3vsKQEucOsKFLlYoQ?p=preview

Can you check lang value inside $scope.ChangeLanguage function? I think it is always {{selectedlanguage.language}}.

Change: "ChangeLanguage(selectedlanguage.language)"

use this code::::

  <div ng-controller="NavCtrl">
       <select ng-model="selectedlanguage" ng-change="option(selectedlanguage)" ng-options="i as i.language for i in languages"></select>
        {{selectedlanguage.language}}
       <button class="button button-clear" ng-click="ChangeLanguage(selectedlanguage)">Set language</button>
  </div>