Настраивание выпадающих меню с URL-адресом

Я столкнулся с очень сложной проблемой. Мой Угловой пользовательский интерфейс дает пользователям 3 раскрывающихся меню, а 3-е меню - динамическое, основанное на двух предыдущих меню. Это прекрасно работает. У меня также есть динамический URL-адрес, который отображается в 3 раскрывающихся меню, поэтому браузер может автоматически их заполнять. Например, если URL-адрес браузера «/ home? SelectedLetter = A & selectedNumber = 2 & selectedColor = 7891», то после того, как я вставляю этот URL-адрес на новую вкладку, выпадающие списки должны быть автоматически установлены в A, 2 и Black (что соответствует 7891 в массиве).Настраивание выпадающих меню с URL-адресом

Однако, только выпадающие списки selectedLetter и selectedColor заполняются так, как ожидалось, selectedColor пуст (после отладки я обнаружил, что это потому, что setColorSelection() никогда не вызывается. Ng-change() вызовы в первых двух меню никогда не запускаются). Браузеру определенно известно, что selectedColor - 7891, но просто не отображает его в пользовательском интерфейсе. Даже если я смогу его показать, как мне преобразовать его в «Черный» в меню? Я просто не могу обойти эту проблему. Есть идеи?

HTML:

<select ng-model="selectedLetter" 
     ng-change="setColorSelection()" 
     ng-options="letter as letter for letter in letters"> 
</select> 
<select ng-model="selectedNumber" 
     ng-change="setColorSelection()" 
     ng-options="number as number for number in numbers"> 
</select> 
<select ng-model="selectedColor" 
     ng-options="color.ID as color.colorName for color in colorSelection"> 
</select>

Угловая внутри контроллера:

$scope.letters = ['A', 'B']; 
$scope.numbers = ['1', '2']; 

var colors = {  // Note that all IDs are unique 
    'A1': [{"colorName": "Red", "ID": "1001"}, {"colorName": "Pink", "ID": "3002"}], 
    'A2': [{"colorName": "Blue", "ID": "9022"}, {"colorName": "Black", "ID": "7891"}], 
    'B1': [{"colorName": "Yellow", "ID": "5436"}, {"colorName": "Orange", "ID": "4444"}] 
}; 

$scope.colorSelection = []; 


// This populates selectedLetter and selectedNumber, doesn't work for selectedColor 
var params = $location.search() 
if (params.selectedLetter) { 
    $scope.selectedLetter = params.selectedLetter; 
} 
if (params.selectedNumber) { 
    $scope.selectedNumber = params.selectedNumber; 
} 
if (params.selectedColor) { 
    $scope.selectedColor = params.selectedColor; 
} 


$scope.setColorSelection = function() { 
    if ($scope.selectedLetter && $scope.selectedNumber) { 
     $scope.colorSelection = colors[$scope.selectedLetter + $scope.selectedNumber]; 
    } 
}

источник

2016-04-22 kevin_b

Привет, приятель, вы пытались утешить значение для выбранного цвета? вы можете иметь филе, пожалуйста? – Kailas

@ Kailas значение консоли для selectedColor составляет 7891, это просто, что пользовательский интерфейс не показывает 7891 или «черный» –

Я сделаю скрипку –

ng-change сработал только тогда, когда значение поле выбора изменяется. Итак, попробуйте использовать:

if (params.selectedColor) { 
    if ($scope.selectedLetter && $scope.selectedNumber) { 
     $scope.colorSelection = colors[$scope.selectedLetter + $scope.selectedNumber]; 
    } 
    $scope.selectedColor = params.selectedColor; 
}

Так что colorSelection готова, прежде чем модель установлена.

источник

2016-04-22 06:13:11 Kailas

Настраивание выпадающих меню с URL-адресом

ответ

Смежные вопросы