ng按现有数组值重复筛选
ng-repeat filter by existing array values
因此,我正在使用一个基本的产品类别模型来进行筛选,但我不知道如何从数组中的一个对象提取属性值,同时在另一个对象中重复。
我的类别数组的简化版本在scope中,如下所示。我可以用前面的指令输出它们的名称,结果如预期:
[{
"_id": "TY76",
"name": "Planes"
}, {
"_id": "887T",
"name": "Trains"
}, {
"_id": "A0K4",
"name": "Autos"
}]
<p ng-repeat="category in product.categories "> {{ category.name }}</p>
这里有一个简化的产品,也在范围内,它可能包含一个或多个类别的ID。在这种情况下,Bobble Head同时属于Planes和Autos:
{
"_id": "9876",
"name": "Bobble Head",
"cats": "['TY76','A0K4']"
}
现在,我在这里过得很艰难。我需要输出产品的类别名称。我可以通过毫无问题地输出ID
<p ng-repeat="cat in product.cats ">{{ cat }}</p>
但这对最终用户来说没有用,但我不知道如何最终得到这样的东西:
产品:摇头|类别飞机、汽车
我没有为每种产品添加类别名称的自主权,我尝试了一系列不同的过滤方法,但我认为我的问题措辞不对,因为我在互联网上找不到太多关于这方面的信息。
有什么想法吗?
听起来你想建立一个从类别id到类别名称的查找:
var categories = [{
"_id": "TY76",
"name": "Planes"
}, {
"_id": "887T",
"name": "Trains"
}, {
"_id": "A0K4",
"name": "Autos"
}];
// build a category lookup id -> name
var categoryLookup = {};
categories.forEach(function(category) {
categoryLookup[category._id] = category.name;
});
这是一把完整的小提琴:http://jsfiddle.net/02qadem7/1/
您可以创建一个密钥对对象,其中密钥是id,值是类别的名称:
var categoriesArray = [{
"_id": "TY76",
"name": "Planes"
}, {
"_id": "887T",
"name": "Trains"
}, {
"_id": "A0K4",
"name": "Autos"
}];
$scope.categoriesMap = {};
categoriesArray.forEach(function(category) {
$scope.categoriesMap[category._id] = category.name;
});
然后在您的视图中,您可以访问这样的类别名称:
<div ng-repeat="product in products">
<strong>Product: </strong> {{product.name}} |
<strong>Categories: </strong> <span ng-repeat="category in product.cats">
{{categoriesMap[category]}}
</span>
</div>
下面是一个plunkr:http://plnkr.co/edit/BpBcCizzU2Vh8VPniiHA?p=preview
我建议在categories数组上使用自定义过滤器。
myApp.filter('byCategoryIds', function() {
return function(categories, catIds) {
return categories.filter(function(item) {
return (catIds.indexOf(item._id) != -1);
});
};
});
然后你可以在categori数组上迭代发送id数组,如下所示:
<b>Product:</b>
{{product.name}};
<b>Categories:</b>
<span ng-repeat="cat in categories | byCategoryIds: product.cats">{{ cat.name }}, </span>
相关文章:
- 根据多个值筛选数组
- 使用特定值筛选数组
- 在javascript中按字符串长度筛选数组
- 如何筛选数组数组
- 如何获取输入字段的值并使用它来筛选数组
- 基于键和值的筛选数组
- 对多个选项进行筛选数组以在新选择中返回选项
- AngularJS ngOptions按布尔字段筛选数组
- 使用用户输入的维度,根据每个元素中的字符数筛选数组
- 需要有关创建筛选数组内容的复选框的帮助
- 使用jQuery筛选数组
- 如何使用foreach绑定将select选项中的参数传递给触发器和筛选数组可观测值
- 如何使用jQuery.grep()动态筛选数组
- 数组的严格筛选数组
- 在PHP中使用关键字筛选数组
- 基于javascript中的另一个数组筛选数组
- 基于索引数组筛选数组
- 为提前输入筛选数组的最快方法
- Angularjs基于array类型的属性来筛选数组
- 返回只包含与给定值匹配的元素的筛选数组