從AngularJS中的數組中獲取對象的正確方法

Question

我剛剛開始使用AngularJS，想知道是否有更好的方法可以做到這一點：

我有一家工廠，向我提供代表產品的一系列對象。 （目前已進行硬編碼-產品最終將通過RESTful API返回。）

app.factory('Products', function(){
    var products = [
        { slug: 'wireframe-kit', name: 'Wireframe Kit', price: 27 },
        { slug: 'ui-kit', name: 'UI Kit', price: 29 },
        { slug: 'ui-icons', name: 'UI Icons', price: 39 }
    ];
    return products;
});

假設使用/ product / wireframe-kit之類的路由，以下是路由器當前的設置方式：

app.config(function($routeProvider){
    $routeProvider.
        when('/product/:slug', {
            templateUrl: 'template/product.html',
            controller: 'productController'
        });
    }
}); 

然后，我使用url中的段從控制器中的此數組中檢索正確的產品：

app.controller('productController', function($scope, $routeParams, Products){
    Products.forEach(function(product){
        if( product.slug == $routeParams.slug) {
            $scope.product = product;
        }
    });
});

我關心的是控制器中的forEach循環-我確定必須有一種更簡單，更有效的方法來解析此積數組以獲取所需的對象。 有任何想法嗎？

Answer 1

您可以將api更改為返回對象（如果所有產品都具有唯一的子彈）。 這樣，您可以通過密鑰（子彈）名稱訪問產品：

app.factory('Products', function(){
    var products = {
        'wireframe-kit': { slug: 'wireframe-kit', name: 'Wireframe Kit', price: 27 },
        'ui-kit': { slug: 'ui-kit', name: 'UI Kit', price: 29 },
        'ui-icons': { slug: 'ui-icons', name: 'UI Icons', price: 39 }
    };
    return products;
});


app.controller('productController', function($scope, $routeParams, Products){
    $scope.product = Products[$routeParams.slug];
});

Answer 2

如果我們通過實用的方式設置了REST API，

/products是您的“收藏”

和/products/:id成為您的“模特”

在使用靜態數據時，仍然有必要將數據作為靜態文件放置在服務器上，以模仿相關Web文件夾中的這些模式。

然后使用Angular，您可以設置路由以獲取對這些“端點”的請求

• /products/ -給您$scope.collection
• /products/<id of products> -為您提供$scope.model