2013-05-30 58 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