Question

我正在使用AngularJS和JSON构建博客。除了一个过滤器项目外，一切正常。我对Angular很新，我正在努力解决它。

我有一个无序的标签列表，我正在使用ng-repeat打印出来，如下所示：

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

我想添加ng-click以便过滤博客文章预览，其内容通过Angular使用相同的JSON文件和我获取标签数据的相同范围进行过滤。

我正在将相同的标签拉入我的博客帖子中（请忽略搜索..我已经开始使用Angular实时搜索了。）：

<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>

我只是不完全理解如何将click事件添加到列表项并让它仅过滤具有匹配标记的博客帖子。我觉得我已经尝试了所有的东西，但这并不像是应该那么困难的东西。

非常感谢任何帮助！

Answer 1

一种方法是在点击时设置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
};

使用ng-click过滤博客帖子

1 个答案: