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 的数据。但是，如果排序顺序更改为“制造”，将布加迪放在首位，现在如果您单击“威龙”链接，将再次传递 0 的 id，但由于数据对象没有更改，0 仍然映射到“阿格拉。”

理想情况下，我只想使用我自己的 $routeParams 以便 URL 更明确：

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

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

但是现在我无法告诉我的数据数组使用哪个汽车对象。那么如何在不使用数组订单 ID 的情况下使用 $routeParams 连接到我的汽车数组中的正确“汽车”对象？

或者我怎样才能将 id 固定到它们的对象上，以便它们不附加到排序顺序？

== 编辑 ==

好的，我已经更改了我的范围以显式调用对象中的每个项目：

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

所以这行得通。虽然对于大物体来说似乎非常低效。另外，如果该数据不在 URL 中，则它不起作用。有没有更好的办法？

4

1 回答 1

1

所以基本上你需要关闭一些东西，在这种情况下，关键是品牌和型号，所以你必须通过你的数组来找到正确的键控项目。

示例（在http://plnkr.co/edit/9zCqsyWomYeTgm3GJTsv?p=preview工作）：

var app = angular.module('plunker', []).config(function($routeProvider){
    $routeProvider
      .when('/', {templateUrl: 'home.html'})
      .when('/:make/:model', {templateUrl: 'car.html'})
      .otherwise({redirectTo: '/'});

  }
);

app.controller('MainCtrl', function($scope) {
  $scope.cars = [ 
      {"make":"koenigsegg", "model":"agera"},
      {"make":"pagani", "model":"huayra"},
      {"make":"noble", "model":"m600"}, 
      {"make":"bugatti", "model":"veyron"} 
    ]
});

app.controller('CarCtrl', function($scope, $routeParams) {
  var findCar = function(){
    for(var i = 0; i < $scope.$parent.cars.length; ++i){
      var car = $scope.$parent.cars[i];
      if(car.make === $routeParams.make && car.model === $routeParams.model){
        return car;
      }
    }
  }
  $scope.car = findCar();

  $scope.$routeParams = $routeParams;
});

为了提高效率，您需要创建一个服务来创建某种键的索引，这样当您查找它时，您会更快地执行此操作（而不是遍历整个数组）。您可以在http://docs.angularjs.org/tutorial/step_11查看如何提供服务。

于 2013-05-30T17:30:23.260 回答