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下拉语言选择

回答

相关问题