経路を更新するために選択入力フィルターを使用する角度？

Question

私は自分のアプリを設定して、選択した入力を使って色でフィルタリングすることができます。URLにこのカラーパラメータがある場合は、$routeproviderも渡します。

私が今したいのは、選択ボックスが変更されたときにURL /ルートを更新することです。選択肢の変更をルートにバインドするにはどうすればよいですか？

Answer 1

選択は、あなたが$location.pathを設定する機能を呼び出すために使用することができますundocumented NG-変更パラメータがあります。

<select ... ng-model="color" ng-change="updatePath()"> 

コントローラー：

function MyCtrl($scope, $location) { 
    $scope.updatePath = function() { 
     $location.path(... use $scope.color here ...); 
    } 
} 

Answer 2

あなた<select>要素を持つモデルにバインドされますng-model、これは$watchとなり、$location.pathまたは$location.searchのいずれかを更新するために使用します。個人的には、$location.searchを使用することをお勧めします。ちょうどを変更することができます。コントローラのパス全体を把握する必要がないため、必要なパラメータを少なくすることができます。

ですから、このような<select>要素を持っていると仮定すると：

<select ng-model="selectedColor" ng-options="color for color in colors"> 

あなたは色がundefinedあるいはfalsey（ある場合nullにそれを設定して確認して、あなたのバインドされた値を見て、あなたの$location.searchを更新するために$watchを使用することができます

$scope.$watch('selectedColor', function (color) { 
    if (color) { 
     $location.search('color', color); 
    } else { 
     $location.search('color', null); 
    } 
}); 

検索パラメータとローカルモデルとの間に双方向バインディングを設定すると、次のように設定できます。変更は、あなたの<select>に反映されます。

$scope.$watch('$location.search().color', function (color) { 
    $scope.selectedColor = color; 
}); 

そして、それはちょうどあなたのルーティングコントローラに$routeParams.colorへのアクセスの問題です。

完全な使用例はplunkを参照してください。