Question

如果我保持排序顺序不变，使用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”链接，将再次传递id为0，但由于数据对象未更改，0仍然映射到“AGERA。”

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

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

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

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

或者我如何将ID固定在其对象上，以便它们不会附加到排序顺序？

==编辑==

好的，我已将范围更改为显式调出对象中的每个项目：

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

这样有效。对于大型物体来说，似乎效率极低。此外，如果该数据不在URL中，它也不起作用。还有更好的方法吗？

Answer 1

所以基本上你需要键入一些东西，在这种情况下，键是make和model，所以你必须通过你的数组来找到正确的键控项。

示例（在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查看如何投放服务。

更改ng-repeat的排序顺序会更改routeParams.id

1 个答案: