I'm new to angular and have run into a scenario where I don't know the best way to setup this code.
我是角色的新手,遇到了一个我不知道设置此代码的最佳方法的场景。
I have 2 JSON files:
我有2个JSON文件:
images.json
{
"imageName": "example.jpg",
"imageTags": ["fun","work","utility"]
"productID": ["item1","item3"]
}
products.json
{
"productID": "item1",
"productName": "Staple Gun",
"productURL": "Staple-Gun.htm"
}
I don't have any code yet, I'm really trying to make sure I build this properly first.
我还没有任何代码,我真的想确保我先正确地构建它。
My goal is to pull images based on tags, so I put a filter on the first ng-repeat portion. This portion works well. But I want to be able to link to the products that are in the images. The easiest thing I found was to do a ng-repeat with the productID as a filter, but if I am pulling 50 photos and each photo has 2 items, that is a ton of repeats. It seems to me that this would require a ton of resources. Is this the best way or is there a better way to handle this?
我的目标是基于标签来提取图像,因此我在第一个ng-repeat部分放置了一个过滤器。这部分效果很好。但我希望能够链接到图像中的产品。我找到的最简单的事情是使用productID作为过滤器进行ng-repeat,但如果我要拉50张照片并且每张照片有2个项目,那就是大量的重复。在我看来,这将需要大量的资源。这是最好的方式还是有更好的方法来处理这个问题?
Code example:
<div ng-repeat="photo in photos | filter: 'fun'">
<img ng-src="{{ photo.imageName }}">
<span>Products In This Image</span>
<div ng-repeat="product in products | filter: photo.productID">
<a ng-href="{{ product.productURL }}" title="{{ product.productName }}">{{ product.productName }}</a>
</div>
</div>
1 个解决方案
#1
1
A simple mapping of the products to an object that uses the productID
as keys would be much more efficient
将产品简单映射到使用productID作为键的对象将更加高效
$scope.product_map = {};
products.forEach(function(item) {
$scope.product_map[item.productID] = item
});
Will produce:
{
"item1": {
"productID": "item1",
"productName": "Staple Gun",
"productURL": "Staple-Gun.htm"
}
}
This means instead of having to filter a whole array each time you need to look up a product you can simply do:
这意味着您无需在每次需要查找产品时过滤整个数组,而只需执行以下操作:
var productNeeded = $scope.product_map['item1'];
In the view this would translate to:
在视图中,这将转化为:
<div ng-repeat="photo in photos | filter: 'fun'">
<img ng-src="{{ photo.imageName }}">
<span>Products In This Image</span>
<!-- iterate small array of productID's in photo object -->
<div ng-repeat="id in photo.productID">
<!-- product_map[id] is a single object reference -->
<a ng-href="{{ product_map[id].productURL }}" title="{{ product_map[id].productName }}">{{ product_map[id].productName }}</a>
</div>
</div>
#1
1
A simple mapping of the products to an object that uses the productID
as keys would be much more efficient
将产品简单映射到使用productID作为键的对象将更加高效
$scope.product_map = {};
products.forEach(function(item) {
$scope.product_map[item.productID] = item
});
Will produce:
{
"item1": {
"productID": "item1",
"productName": "Staple Gun",
"productURL": "Staple-Gun.htm"
}
}
This means instead of having to filter a whole array each time you need to look up a product you can simply do:
这意味着您无需在每次需要查找产品时过滤整个数组,而只需执行以下操作:
var productNeeded = $scope.product_map['item1'];
In the view this would translate to:
在视图中,这将转化为:
<div ng-repeat="photo in photos | filter: 'fun'">
<img ng-src="{{ photo.imageName }}">
<span>Products In This Image</span>
<!-- iterate small array of productID's in photo object -->
<div ng-repeat="id in photo.productID">
<!-- product_map[id] is a single object reference -->
<a ng-href="{{ product_map[id].productURL }}" title="{{ product_map[id].productName }}">{{ product_map[id].productName }}</a>
</div>
</div>