Javascript 基于父ng repeat筛选ng repeat
抓挠我的头两个小时。也许我累了,也许我不明白我在做什么。不管怎么说,我有很多博客帖子。看起来是这样的:Javascript 基于父ng repeat筛选ng repeat,javascript,angularjs,Javascript,Angularjs,抓挠我的头两个小时。也许我累了,也许我不明白我在做什么。不管怎么说,我有很多博客帖子。看起来是这样的: [ { 'title': 'first post', 'tags': [ { 'name': 'Tag 1', 'slug': 'tag-1' } ] }, { 'title': 'second post', 'tags': [ { 'name': 'Tag 1', 'slug': 'tag-1' },
[
{
'title': 'first post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' }
]
},
{
'title': 'second post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' },
{ 'name': 'Tag 3', 'slug': 'tag-3' }
]
},
{
'title': 'third post',
'tags': [
{ 'name': 'Tag 2', 'slug': 'tag-2' }
]
}
]
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: tag.slug IN post.tags">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
<div ng-controller="BlogComponent as blog">
<div ng-repeat="tag in blog.tags">
<div ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<h3 ng-if="$first">{{ tag.title }}</h3>
<li>{{ post.title }}</li>
</div>
</div>
</div>
还有一个数组,包含像这样的标记
[
{'title': 'Tag 1', 'slug':'tag-1'},
{'title': 'Tag 2', 'slug':'tag-2'},
{'title': 'Tag 3', 'slug':'tag-3'},
{'title': 'Tag 4', 'slug':'tag-4'}
]
我正在做一个常规的重复,像这样显示我所有的blogpost标签:
<ul>
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
</li>
</ul>
但我似乎无法让它工作。我认为这应该很容易。因为在我看来,这是一项相当简单的任务。根据字符串和数组过滤掉不需要的结果
需要/导出的输出:
<ul>
<li>
<h3>Tag 1</h3>
<ul>
<li>first post</li>
<li>second post</li>
</ul>
</li>
<li>
<h3>Tag 2</h3>
<ul>
<li>third post</li>
</ul>
</li>
<li>
<h3>Tag 3</h3>
<ul>
<li>second post</li>
</ul>
</li>
</ul>
-
标签1
- 第一个职位
- 第二职位
-
标签2
- 第三职位
-
标签3
- 第二职位
您可以创建一个自定义过滤器,而不是使用“过滤器:表达式”。
您可以做的是创建一个过滤器,该过滤器将标记和帖子作为参数,并返回带有过滤项的数组
myApp.filter('myFilter', function () {
return function (posts, tag) {
var newPosts = [];
for (var i = 0; i < posts.length; i++)
for (var j = 0; j < post.tags.length; j++)
if (posts[i].tags[j].slug === tag.slug)
newPosts.push(posts[i]);
return newPosts;
}
});
myApp.filter('myFilter',函数(){
返回功能(贴子、标签){
var newPosts=[];
对于(变量i=0;i
然后
<li ng-repeat="post in blog.posts | myFilter: tag">
<span>{{ post.title }}</span>
</li>
{{post.title}}
使用内置功能,您可以这样做:
[
{
'title': 'first post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' }
]
},
{
'title': 'second post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' },
{ 'name': 'Tag 3', 'slug': 'tag-3' }
]
},
{
'title': 'third post',
'tags': [
{ 'name': 'Tag 2', 'slug': 'tag-2' }
]
}
]
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: tag.slug IN post.tags">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
<div ng-controller="BlogComponent as blog">
<div ng-repeat="tag in blog.tags">
<div ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<h3 ng-if="$first">{{ tag.title }}</h3>
<li>{{ post.title }}</li>
</div>
</div>
</div>
-
{{tag.title}}
-
{{post.title}}
看到它在这里工作:
过滤器的文档如下所示:
或者,如果您想隐藏标签4,因为它没有匹配的帖子,您可以这样做:
[
{
'title': 'first post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' }
]
},
{
'title': 'second post',
'tags': [
{ 'name': 'Tag 1', 'slug': 'tag-1' },
{ 'name': 'Tag 3', 'slug': 'tag-3' }
]
},
{
'title': 'third post',
'tags': [
{ 'name': 'Tag 2', 'slug': 'tag-2' }
]
}
]
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: tag.slug IN post.tags">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
<ul ng-controller="BlogComponent as blog">
<li ng-repeat="tag in blog.tags">
<h3>{{ tag.title }}</h3>
<ul>
<li ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<span>{{ post.title }}</span>
</li>
</ul>
</li>
</ul>
<div ng-controller="BlogComponent as blog">
<div ng-repeat="tag in blog.tags">
<div ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
<h3 ng-if="$first">{{ tag.title }}</h3>
<li>{{ post.title }}</li>
</div>
</div>
</div>
{{tag.title}}
{{post.title}}
您希望将post.tags
映射到slugsCan的数组中。请添加您期望的实际输出?您是否仍有问题,或者给出的答案之一是否对您有所帮助?