AngularJS：過濾後，細節屏幕仍然顯示路由參數的非過濾索引

Question

在AngularJS上，我有一個SKU和一個名稱的過濾器。這些在過濾正確的信息方面效果很好。但是，當我想要使用路由來顯示更多信息時，它會加載索引0，儘管我正在選擇不同的選項。我不太確定缺少什麼來顯示正確的詳細信息頁面。 下面是HTML：

<input ng-model="search.name" placeholder="Enter search term here..."> 
<input ng-model="search.upc" placeholder="Enter SKU here..."> 

<li ng-repeat="product in productsArray | filter:search | filter:upc"> 
<a href="#/detail/{{$index}}"><button class="productListItem">{{product.name}}</button></a></li> 

-------------------------` 這裏是JavaScript： angular.module（ 「成分產品」，['ngRoute']）

.config(function($routeProvider){ 

    $routeProvider.when('/main',{ 
     templateUrl: "main.html", 
     controller : "mainController" 
    }).when('/detail/:productID',{ 
     templateUrl: "details.html", 
     controller : "detailsController" 
    }).otherwise({ 
     redirectTo : "/main" 
    }); 
}) 
.controller("mainController", function($scope, dataService){ 
    var productsArray = []; 

    $scope.productsArray = dataService.getProducts(); 
}) 
.controller("detailsController", function($scope, $routeParams, dataService){ 

    $scope.product= dataService.getProductAt($routeParams.productID); 

}）;

---

angular.module("ingredientProducts").service("dataService", function(){ 
    var productsArray = [ 
     {name: "Glass Container", 
      upc: "2000000000", 
      description: "This is a glass container", 
      ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
      allergy: "This product may contain soy, gluten, and dairy.", 
      img: "glass.jpg", 
     }]; 

    this.getProducts = function(){ 
     return productsArray; 
    }; 
    this.getProductAt = function(product){ 
     this.getProducts(); 
     return productsArray[product]; 
    }; 
}); 

謝謝您的幫助！

Answer 1

當您過濾產品的數組索引將不等於服務中的產品索引時，您不能依賴$ index becouse。

請在這裏看到的解決方案http://plnkr.co/edit/xFMkHxwDwkJfcqwnbHg8?p=preview

主視圖：

<li ng-repeat="product in productsArray | filter:search | filter:upc"> 
<a href="#/detail/{{product.upc}}"><button class="productListItem">{{product.name}}</button></a></li> 

數據服務：

angular.module("plunker").service("dataService", function(filterFilter) { 
    var productsArray = [{ 
    name: "Glass Container", 
    upc: "2000000000", 
    description: "This is a glass container", 
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    allergy: "This product may contain soy, gluten, and dairy.", 
    img: "glass.jpg", 
    }, 
    { 
    name: "Jar", 
    upc: "2000000001", 
    description: "This is a glass container", 
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    allergy: "This product may contain soy, gluten, and dairy.", 
    img: "glass.jpg", 
    }, 
    { 
    name: "Tent", 
    upc: "2000000002", 
    description: "This is a glass container", 
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    allergy: "This product may contain soy, gluten, and dairy.", 
    img: "glass.jpg", 
    }, 
    { 
    name: "Bootle", 
    upc: "2000000003", 
    description: "This is a glass container", 
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    allergy: "This product may contain soy, gluten, and dairy.", 
    img: "glass.jpg", 
    }]; 

    this.getProducts = function() { 
    return productsArray; 
    }; 
    this.getProductAt = function(_upc) { 
    this.getProducts(); 
    return filterFilter(productsArray, {upc:_upc})[0]; 
    }; 
});