Question

我有2个按钮下拉菜单，通过角度下拉菜单。当我在一个下拉列表中单击语言选择时，我想要更改显示在另一个下拉列表中的数组（使用该语言）。事情适用于硬编码的更改，但不适用于用户点击。

作为一名Angular新手，我不确定工厂是否正确，但这是我当下的代码。数组内容缩短。用于语言选择的控制器是：

residenceApp.controller('languageController', [ '$scope', 'changeLanguage',
function( $scope, changeLanguage ) {
var languageChoices = [
    {"text": "English", "val": "en"},
    {"text": "Español", "val": "es"}
];
$scope.ddMenuOptions = languageChoices;
$scope.ddMenuSelected = {};
$scope.$watch('ddMenuSelected', function(newVal) {
    if (newVal && newVal.text) {                    
        changeLanguage(newVal.val);
        //changeLanguage is a factory function that executes translate.use(langKey); to translate HTML elements. It works.
    }
}, true); //end of $scope.watch()
}]);

语言选择按钮的相关HTML是：

<div id="leftOfMap" class="floatingSection" data-ng-controller="languageController">
<ul>
<li class="leftOfMapItem"><button id="languageButton" dropdown-menu="ddMenuOptions" dropdown-model="ddMenuSelected" class="btn-menu">{{ 'LANGUAGE' | translate }}</button></li>

第二个按钮的HTML是相同的，除了按钮上的id和名称。

具有多种语言的下拉数组的工厂看起来像：

languageFactories.factory( 'changePostDd', [ '$translate', function( translate ) {
var ddSelections = [];
var ddSelections_en = [
{"text": "RENT:", "val": "R"},
{"text": "SELL:", "val": "S"}
];
var ddSelections_es = [
{"text": "RENTAR:", "val": "R"},
{"text": "VENDER:", "val": "S"}
];
var langKey=translate.use(); //works on page load only
    switch( langKey ) {
  case "en":
     ddSelections = ddSelections_en;
     break;
  case "es":
     ddSelections = ddSelections_es;
     break;
  default:
     console.log('There should not be a default failover.');
    }
return ddSelections;
}]);

在很多事情中，我在工厂尝试了$ scope，它打破了整个页面。我尝试了value（）方法，它不适用于点击。

第二个下拉按钮的控制器与第一个下拉按钮非常相似，只是它从工厂获取阵列，而不是在控制器中进行硬编码。

residenceApp.controller('postButtonController', ['$scope', 'changePostDd',
function ($scope, ddSelections) {
    $scope.ddMenuOptions = ddSelections;
    $scope.ddMenuSelected = {};
    $scope.$watch('ddMenuSelected', function(newVal) {
      if (newVal && newVal.text) {
      // do stuff
      }

简而言之，当单击Espanol选项并将newVal.val设置为es时，我希望工厂（或其他）在ddSelections_es中切换（）。目前，ddSelections_en转到页面加载时的第二个下拉按钮，当在Espanol上进行单击更改时，工厂不会更改阵列以便在第二个按钮上显示。如何更改ddSelections数组？

Answer 1

您可以通过以下方式在AngularJS中执行此操作。我相信你可以在类似的小部件库中使用相同的东西。这里的关键是你的ng-options选择

ddSelectionsAllLangs[languageSelected.val]

您也可以在示波器上使用某些功能。

//this is your existing code - language choices
var languageChoices = [
    {"text": "English", "val": "en"},
    {"text": "Español", "val": "es"}
];
$scope.ddMenuOptions = languageChoices;

//if you want to default to certain language 
$scope.languageSelected = languageChoices[0];


var ddSelections_en = [

{"text": "RENT:", "val": "R"},
{"text": "SELL:", "val": "S"}
];
var ddSelections_es = [
{"text": "RENTAR:", "val": "R"},
{"text": "VENDER:", "val": "S"}
];

$scope.ddSelectionsAllLangs = {
   en: ddSelections_en,
   es: ddSelections_es
}

然后在HTML中说这个下拉菜单选择语言。

<select ng-model="languageSelected" ng-options="lang.text for lang in   languageChoices">
 <option value="">-- choose language --</option>
</select>

下一个下拉菜单是实际内容。

<select ng-model="ddSelected" 
     ng-options="lang.text for lang in  ddSelectionsAllLangs[languageSelected.val]">
 </select>

另一种选择： - 使用$ rootScope.myLang代替其他<select>来选择语言

languageFactories.factory( 'changePostDd', [ '$translate', '$rootScope', function( translate, $rootScope ) { 


var ddSelectionsAllLangs = {
   en: [
         {"text": "RENT:", "val": "R"},
         {"text": "SELL:", "val": "S"}
   ],
   es: [
         {"text": "RENTAR:", "val": "R"},
         {"text": "VENDER:", "val": "S"}
   ]
 };

var changePostDdFactory = {};

//returns an array appropriate to the language   
changePostDdFactory.getDDSelections = function() {
       return  ddSelectionsAllLangs[$rootScope.myLang]
};

return changePostDdFactory;

}]);

Answer 2

我放弃了在预感上建立定制工厂的努力，即使用angular-translate中的$ translate服务可以工作。它花了很多关于AngularJS的知识和令人尴尬的小时数，但最终它在控制器的worker函数中有3行代码。工作代码在这里：

Can't get $translate service from angular-translate to change dropdown array for ngDropdowns

bhantol，谢谢你指点我正确的方向去学习。

从控制器的下拉选择中获取变量以更改Angular工厂中的另一个选择

2 个答案: