AngularJS下拉語言選擇

學校項目我正在使用AngularJS創建一個應用程序。我正在嘗試創建一個使用按鈕設置所選語言的下拉菜單。AngularJS下拉語言選擇

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>

目前按鈕總是將我的語言爲[1]（NL），我怎麼得到它設置語言爲在下拉菜單中選擇語言？

來源

2015-10-20 Tabs

我可以看到一些問題。

首先，你並不需要在您的視圖的this.selectedLanguage，爲$scope被自動設爲您的背景：

ng-change="option(selectedlanguage)"

二，在你的控制器，你要設置$scope.selectedlanguage到i ，但在視圖中將其綁定到i.language。爲了解決這個問題，請嘗試：

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

的x as y語法，您可以綁定x到模型中，同時顯示y您的下拉列表的標籤。

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

三，作爲@Matthew伯格所指出的，你不需要在{{...}}單擊處理程序：

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

這裏的一切工作的一個plunkr：

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

來源

2015-10-20 13:18:46

這固定了一切！感謝您的快速回復，並幫助我瞭解更多有關JS的信息:)。 – Tabs

使用此代碼::::

<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>

來源

2015-10-20 13:03:58

這一項並沒有奏效，但正如@Mike Chamberlain指出的那樣，部分問題需要解決整體問題。謝謝！ – Tabs

好吧，我認爲修改後的版本可以解決你的問題.. –

你可以檢查$ scope.ChangeLanguage函數裏面郎值？我認爲它總是{{selectedlanguage.language}}。

變化：「ChangeLanguage（selectedlanguage.language）」

來源

2015-10-20 13:05:46

無需將其包裹在{{...}}

<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>

來源

2015-10-20 13:19:17

感謝您的提示，您的評論與@Mike Chamberlain結合解決了我的問題！ – Tabs

我會盡快獲得所需的聲望！ – Tabs

AngularJS下拉語言選擇

回答

相關問題