2013-05-30 65 views
0

如果我保持排序顺序不变,则使用routeParams.id从我的scope.data对象中提取正确的对象,就像魅力一样。只要订单改变,routeParams.id就会改变,并且与$ scope.data中的对象顺序不匹配。更改ng-repeat更改的排序顺序routeParams.id

$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> 

所以点击 “AGERA” id为0将打开/#/ 0和结合将对应于$ scope.cars [0],示出了用于AGERA的数据。但是,如果排序顺序改变为“make”,首先放置布加迪,现在如果点击“Veyron”链接,则会再次传递0的ID,但由于数据对象没有改变,所以0仍然映射到“AGERA。”

理想情况下,我想只用自己的$ routeParams从而使URL更加明确:

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

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

但现在我有没有告诉我的数据阵列要使用的车对象的方式。那么如何使用$ routeParams连接到汽车数组中正确的“car”对象而不使用数组顺序ID?

或者我怎样才能将ID固定在它们的对象上,以便它们不依附于排序顺序?

== ==编辑

好吧,我改变了我的范围,明确地叫出对象中的每个项目:

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

使作品。尽管对于大件物品来说似乎非常无效。另外,如果该数据不在URL中,则不起作用。有没有更好的办法?

回答

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看到如何提供服务。

+0

您的循环示例完全合理,但您说得对,效率不高。我的实际数据已存储在工厂中。有没有办法在工厂上运行特定查询?您引用的页面在获取请求中使用params属性,但这样做会加载完全不同的json。大数据集的好方法。我想知道是否有一个中间立场:查询单个工厂数据集。 – iamsar

+0

是的,您可以通过将其拉入两个控制器并将该数据集上的功能从控制器调用来查询该单个工厂数据集。因此,注入'myFactory',然后调用'$ scope.car = myFactory.findCar(key)'。 –

+0

啊太棒了,这是完美的。谢谢 – iamsar