7

選択した入力を使用して商品のリストを色でフィルタリングできるようにアプリを設定しました$routeprovider。また、URLにこの色パラメータが存在する場合は、この色パラメータをページに渡します。

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

4

2 に答える 2

4

要素<select>は を使用してモデルにバインドされng-modelます。これを使用して、または$watchを更新できます。個人的には、 を使用することをお勧めします。必要なパラメーターだけを変更でき、コントローラーのパス全体を知る必要がないため、作業が少し少なくなります。$location.path$location.search$location.search

したがって、次の<select>ような要素があるとします。

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

を使用$watchして、バインドされた値を監視し、 を更新して$location.search、必ずnullif color isundefinedまたは falsey に設定することができます (これにより、検索パラメーターがクリアされます)。

$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を参照してください。

于 2013-02-06T16:05:29.517 に答える