使用 URL 填充下拉菜单答案

【问题标题】：Populating dropdown menus with URL使用 URL 填充下拉菜单
【发布时间】：2016-08-15 12:47:00
【问题描述】：

我遇到了一个非常棘手的问题。我的 Angular UI 为用户提供了 3 个下拉菜单，第三个菜单是基于前两个菜单的动态菜单。这工作正常。我还有一个映射到 3 个下拉菜单的动态 URL，因此浏览器可以自动填充它们。例如，如果浏览器 URL 是“/home?selectedLetter=A&selectedNumber=2&selectedColor=7891”，那么在我将此 URL 粘贴到新选项卡后，下拉菜单应自动设置为 A、2 和黑色（对应于 7891在数组中）。

但是，只有 selectedLetter 和 selectedColor 下拉列表按预期填充， selectedColor 为空（调试后我发现这是因为从未调用 setColorSelection()。前两个菜单中的 ng-change() 调用从未触发）。浏览器肯定知道 selectedColor 是 7891，但只是没有在 UI 中显示它。即使我可以显示它，如何在菜单中将其转换为“黑色”？我似乎无法解决这个问题。有什么想法吗？

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>

Angular 内部控制器：

$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];
    }
}

【问题讨论】：

嘿伙计，你有没有尝试安慰 selectedcolor 的值？请问你可以吃吗？
@Kailas 的 selectedColor 的控制台值是 7891，只是 UI 没有显示 7891 或“黑色”
我会做一个小提琴
@jebmarcus 在制作小提琴时通知

标签： javascript html angularjs user-interface angularjs-ng-change

【解决方案1】：

ng-change 仅在选择框的值更改时触发。所以，尝试使用：

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

这样colorSelection 在模型设置之前就准备好了。

【讨论】：