0

並べ替え順序を変更しない場合、routeParams.id を使用して scope.data オブジェクトから正しいオブジェクトを取得するのは魅力的です。順序が変更されるとすぐに、routeParams.id が変更され、$scope.data 内のオブジェクトの順序と一致しなくなります。

$scope.cars = {
  [ {"make":"koenigsegg", "model":"agera"}, { "make":"pagani", "model":"huayra"},
   {"make":noble, "model":"m600"}, {"make":"bugatti", "model":"veyron"} ]
}

// car list page
<li ng-repeat="(id, car) in cars">
  <a href="#/{{id}}>{{car.model}}</a>
</li>

// Get data for individual car based on URL
// This is the key piece I'm having trouble with
controller.myCtrl = function($scope, $routeParams) {
  $scope.car = $scope.cars[$routeParams.id];
};

// specific car page
<p>{{car.make}}: {{car.model}}</p>

したがって、ID 0 の「Agera」をクリックすると、/#/0 が開き、バインドは $scope.cars[0] に対応し、Agera のデータが表示されます。ただし、並べ替え順序が「make」に変更され、Bugatti が最初に配置された場合、「Veyron」リンクをクリックすると 0 の ID が再び渡されますが、データ オブジェクトが変更されていないため、0 は引き続き「アゲラ」

理想的には、URL がより明確になるように、独自の $routeParams を使用したいと思います。

$routeProvider.when('/:make/:model, { ... });

<a href="#/{{car.make}}/{{car.model}}">{{car.model}}</a>

しかし今では、どの car オブジェクトを使用するかをデータ配列に伝える方法がありません。では、$routeParams を使用して、配列の順序 ID を使用せずに、cars 配列内の正しい "car" オブジェクトに接続するにはどうすればよいでしょうか?

または、ID をオブジェクトに固定して、並べ替え順序に関連付けられないようにするにはどうすればよいですか?

== 編集 ==

オブジェクト内の各項目を明示的に呼び出すようにスコープを変更しました。

$scope.car = { make: routeParams.make, model: routeParams.model, ... };

それでうまくいきます。大きなオブジェクトの場合でも、ひどく効率が悪いようです。さらに、そのデータが URL に含まれていないと機能しません。より良い方法はありますか?

4

1 に答える 1