URLでドロップダウンメニューに入力する

Question

私は本当に面倒な問題に遭遇しました。私のAngular UIは、ユーザーに3つのドロップダウンメニューを提供し、3番目のメニューは前の2つのメニューに基づいて動的です。これは正常に動作します。私はまた、3つのドロップダウンメニューにマップする動的URLを持っているので、ブラウザはそれらを自動的に読み込むことができます。たとえば、ブラウザのURLが "/ home？selectedLetter = A & selectedNumber = 2 & selectedColor = 7891"の場合、このURLを新しいタブに貼り付けた後、ドロップダウンリストは自動的にA、2、および黒に設定されます配列内の7891に対応します）。

しかし、selectedLetterとselectedColorドロップダウンだけが期待どおりに設定されています。選択された色は空です（デバッグ後、setColorSelection（）が呼び出されなかったためです）最初の2つのメニューの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> 

角度内部コントローラ：

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

Answer 1

ng-changeは、選択ボックスの値が変更された場合にのみトリガされます。だから、使用してみてください：

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

モデルが設定される前colorSelectionが準備されるようになっています。