使用ng-click来过滤博客文章

我正在使用AngularJS和JSON构建博客。除了一个过滤器项目以外，一切正常。我对Angular相当陌生，现在正在为此付出努力。使用ng-click来过滤博客文章

我的标签无序列表，我打印出来使用NG-重复，像这样：

<li class="tag" ng-repeat="myScope.myJsonTag">{{tag}}</li>

，我想补充NG单击它，以过滤博客文章预览其内容通过Angular使用相同的JSON文件进行过滤，其范围与我从中获取标签数据的范围相同。

我拉着非常相同的标签到我的博客文章就像这样（请无视search..I具有角状的生活搜索已经工作。）：

<div class="blog_item" ng-repeat="d in blogData | filter:filters" 
    ng-show="([d.header.title, d.content] | filter:filterBySearch).length > 0, d.d.header.taxonomy.tag.join('') | "> 
    <div class="top_img"> 
     <img src="http://lorempixel.com/400/200"/> 
    </div> 

    <div class="item_text"> 
     <h3>{[{d.header.title}]}</h3> 
     <p>{[{d.content.trunc(100)}]}</p> 
     <a ng-href="insights/{[{d.header.title | slugify}]}">Read Article</a> 
     <p class="tag">{[{d.header.taxonomy.tag.join('')}]}</p> 
    </div> 
</div>

我只是没有完全理解我怎么可以将点击事件添加到列表项并使其仅过滤具有匹配标签的博客文章。我觉得我已经尝试过所有的东西，但这并不觉得应该是那么困难。

任何帮助将不胜感激！

来源

2016-07-23 JoethaCoder

什么是您正在使用的过滤器？ –

其中一个用于实时搜索，另一个用于发布帖子标题，使其小写，并将其与 - 用于发布网址。 – JoethaCoder

一种方法是设置在点击一个selectedTag变量，然后你可以使用这个selectedTag变量过滤帖子：

<li class="tag" ng-repeat="myScope.myJsonTag" ng-click="selectedTag=tag">{{tag}}</li>

，或者你可以看在selectedTag变化和过滤器：

$scope.$watch('selectedTag', function(tag) { 
    // filter posts here 
})

另一种方式是将标签发送到控制器，使过滤发生在控制器：

<li class="tag" ng-repeat="myScope.myJsonTag" ng-click="filterByTag(tag)">{{tag}}</li>

并在控制器中：

$scope.filterByTag = function(tag) { 
    // you can filter post by tags 
};

来源

2016-07-23 02:38:28

这部分对我来说很有意义，而且我已经尝试过了，但我没有遵循的是如何将它连接到博客帖子（如上所述）。我如何做到这一点，当列表项被点击时，它只显示具有该特定标签的博客文章？ – JoethaCoder

你有一个可以按标签过滤帖子的API吗？ –

我不知道;尽管我不确定那里需要什么。这些帖子已经被打印，并且所有帖子都包含该帖子上的标签。如果你看看'item_text'div，你会看到那里。我只是试图编写与单独导航中单击的列表项匹配的脚本;与帖子中的匹配链接。如果帖子中的标签不匹配，我想隐藏它们。 – JoethaCoder

使用ng-click来过滤博客文章

回答

相关问题