如何使用角度过滤器过滤 json答案

【问题标题】：How to filter json using angular filter如何使用角度过滤器过滤 json
【发布时间】：2017-04-06 14:52:31
【问题描述】：

嘿，我对角度滤镜没什么问题。我从 wordpress 导入帖子，我真的很想按标签过滤它们，比如，现在只显示标签 = ENG 的帖子，或者只显示标签 = GER 的帖子。这就是我的 html 的样子

    <div ng-controller="ThreeMainPosts">
        <div ng-repeat="threePost in threePosts | filter : {data.data.posts[0].tags[0].slug = 'ENG'} ">
            <div three-post="threePost">
                <h1>CONTENT</h1></div>
        </div>
    </div>

控制器

myModule.controller('ThreeMainPosts', function($scope, $location, WordPressNewsService) {
var postsPerPage = 3;
var orderBy = 0;
WordPressNewsService.getPosts(postsPerPage, orderBy).then(function(data) {
    $scope.threePosts = data.data.posts;
});

}); 和json

    { id: 312, type: "post", slug: "la-bamba-3", url: "sada2", … }
    attachments:[]
    author:{ id: 1, slug: "ds", name: "hnews", first_name: "", last_name: "", … }
    categories:[{ id: 6, slug: "ludzie", title: "Ludzie", description: "", parent: 0, post_count: 2 }]
    tags: [{ id: 32, slug: "en", title: "EN", description: "EN", post_count: 1 }]
    url:"http://xxx0.co,/?p=312"
    previous_url:"http://hirsch-news.iterative.pl/?p=306"
    status:"ok"

我尝试在控制器中制作过滤器，但我只能对单个元素执行此操作，例如：

if(data.data.posts[0].tags[0].slug == "ENG"){
    $scope.threePosts = data.data.posts;
}

有什么想法吗？有美好的一天！ :)

【问题讨论】：

标签： javascript angularjs json wordpress

【解决方案1】：

制作了一个快速过滤器，可以根据您的需要进行更改。希望能帮助到你。 Angular $filter Docs

这是一个Codepen，带有内置的 $filter。

myModule
  .controller('ThreeMainPosts', function($scope, $location, WordPressNewsService, $filter) {
    var postsPerPage = 3;
    var orderBy = 0;
    var tagToSortBy = 'EN'
    WordPressNewsService.getPosts(postsPerPage, orderBy).then(function(data) {
      $scope.threePosts = $filter('postFilter')(data.data.posts, tagToSortBy);
    });
  })
  .filter('postFilter', function() {
    return function(post, tag) {
      if (post.tags.slug === tag) {
        return post;
      }
    };
  });

如果您想在模板中执行此操作，应该是这样的。

<div ng-controller="ThreeMainPosts">
  <div ng-repeat="post in threePosts | postFilter : 'ENG' ">
    <div three-post="threePost">
      <h1>CONTENT</h1>
    </div>
  </div>
</div>

【讨论】：

这里是 Angular $filter 的文档。 docs.angularjs.org/api/ng/filter/filter 这对于简单的过滤器非常有用，但是如果您需要更复杂的东西，您可以使用 angular.module("yourModule").filter() 构建自己的过滤器。
@Matt，这就是我在上面所做的。自定义过滤器。只是把它从他的控制器上锁起来，不想让答案过于复杂。但感谢您提供的链接将包含在编辑中以供参考。
哦，我快速浏览了这个答案。然后另一个可能是使用 Angular 提供的过滤器
天啊！这很完美，非常感谢你，你节省了我很多时间:)

【解决方案2】：

我想你想要 Array.filter 函数，结合 Array.some

var postsWithTagSlugENG = data.data.posts.filter(function (post) {
    return post.tags.some(function (tag) {
        return tag.slug == "ENG"
    });
});

【讨论】：

感谢您的宝贵时间 :)。我将只使用上面那个人的代码。

【解决方案3】：

这是使用 Angular 提供的过滤器的另一种方法：

在javascript中：

$filter('filter')(data.data.posts, tagToSortBy);

在 HTML 中：

<input type="text" name="searchTag" placeholder="Filter by Any Property" ng-model="search.$" />
<input type="text" name="searchTag" placeholder="Filter by Tag" ng-model="search.tag" />

<div ng-repeat="post in threePosts | filter : search ">

此答案与@alphapilgrim 之间的区别在于您不必创建自己的逻辑来处理过滤。 Angular 提供了一个基本过滤器，即使不是大多数情况，它也能很好地工作。

如果您想了解更多相关信息，请参阅此处的文档。如果你深入挖掘它是非常强大的。 https://docs.angularjs.org/api/ng/filter/filter

【讨论】：

谢谢！我也会试试的：）祝你有美好的一天。