angular 在 select 标签中使用 ng-click

Question

我想要一个下拉列表来更改我网站的显示语言，所以我目前有：

<select ng-controller="langCtrl">
     <option ng-click="switchLanguage('en')" value="en">EN</option>
     <option ng-click="switchLanguage('de')" value="de">DE</option>
     <option ng-click="switchLanguage('it')" value="it">IT</option>
     <option ng-click="switchLanguage('fr')" value="fr">FR</option>
     <option ng-click="switchLanguage('es')" value="es">ES</option>
</select>

但是由于某些原因，这些 ng-click 似乎没有调用指定的函数。我将它们全部更改为按钮，这似乎工作正常，但我想要一个下拉列表，而不是按钮。谁能告诉我为什么这不起作用？

控制器代码：

app.controller('langCtrl', function($translate, $location, $scope) {
$scope.switchLanguage = function (langKey) {
    switch(langKey) {
        case 'en':
            $location.url('/#en');
            break;
        case 'de':
            $location.url('/#de');
            break;
        case 'it':
            $location.url('/#it');
            break;
        case 'fr':
            $location.url('/#fr');
            break;
        case 'es':
            $location.url('/#es');
            break;
        default:
            $location.url('/#en');
    }
    $translate.use(langKey);
  };
});

Answer 1

一个正确的方法是使用 ng-model

angular.module('test', [])

.controller('langCtrl', function($scope, $location/*, $translate*/) {
  $scope.switchLanguage = function() {
    langKey = $scope.selected;
    
    switch (langKey) {
      case 'en':
        alert('/#en');
        //$location.url('/#en');
        break;
      case 'de':
        alert('/#de');
        //$location.url('/#de');
        break;
      case 'it':
        alert('/#it');
        //$location.url('/#it');
        break;
      case 'fr':
        alert('/#fr');
        //$location.url('/#fr');
        break;
      case 'es':
        alert('/#es');
        //$location.url('/#es');
        break;
      default:
        alert('/#en');
        //$location.url('/#en');
    }
    //$translate.use(langKey);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<select ng-app='test' ng-controller="langCtrl" ng-model="selected" ng-change="switchLanguage()">
  <option value="en">EN</option>
  <option value="de">DE</option>
  <option value="it">IT</option>
  <option value="fr">FR</option>
  <option value="es">ES</option>
</select>

不确定为什么您的示例不起作用，但它看起来不错。

Answer 2

您可以与 ng-model 和 ng-change

一起使用

试试这个

<div  ng-controller="langCtrl">
<select ng-change="switchLanguage(ModelName)" ng-model="ModelName">
     <option value="en">EN</option>
     <option value="de">DE</option>
     <option value="it">IT</option>
     <option value="fr">FR</option>
     <option value="es">ES</button>
</select>
</div>

控制器

$scope.switchLanguage = function(ModelName)
{
   var seletedValue = ModelName;
}

angular 在 select 标签中使用 ng-click

angular using ng-click in a select tag

html

javascript

html-select

angularjs

angularjs-ng-click