使用URL填充下拉菜單

我遇到了一個非常棘手的問題。我的Angular UI爲用戶提供3個下拉菜單，第3個菜單基於前兩個菜單是動態的。這工作正常。我也有一個映射到3個下拉菜單的動態URL，因此瀏覽器可以自動填充它們。例如，如果瀏覽器URL爲「/ home？selectedLetter = A & selectedNumber = 2 & selectedColor = 7891」，那麼在將此URL粘貼到新選項卡後，下拉列表應自動設置爲A，2和Black（這對應於陣列中的7891）。（調試後我發現它是因爲setColorSelection（）永遠不會被調用，前兩個菜單中的ng-change（）調用從不觸發）。瀏覽器明確知道selectedColor是7891，但只是不顯示在UI中。即使我能把它展示出來，我如何在菜單中將它轉換爲「黑色」？我似乎無法解決這個問題。有任何想法嗎？使用URL填充下拉菜單

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，它僅僅是UI沒有顯示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填充下拉菜單

回答

相關問題