CODEWITHSUNDEEP
javascriptangularjshtml
Tabs
Tabs

Reputation: 23

AngularJS Dropdown language select

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?

Upvotes: 2

Views: 4523

Answers (4)

Mike Chamberlain
Mike Chamberlain

Reputation: 42480

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.org/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

Upvotes: 2

Upalr
Upalr

Reputation: 2148

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>

Upvotes: 1

Mathew Berg
Mathew Berg

Reputation: 28750

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>

Upvotes: 3

a.u.b
a.u.b

Reputation: 1609

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

Change: "ChangeLanguage(selectedlanguage.language)"

Upvotes: 1

Related Questions