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

嘿，我有点角度过滤器问题。我从wordpress导入帖子，我真的想通过标签过滤它们，比如现在只显示标签= ENG的帖子，或者只显示标签= GER的帖子。这是我的HTML看起来像如何使用角度过滤器过滤json

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

任何想法的家伙？祝你有美好的一天！ :)

来源

2017-04-06 Lapsio

做了一个快速过滤器，可以改变它，您的需求。希望能帮助到你。 Angular $filter Docs

这里是一个Codepen与角度的内置$过滤器。

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>

来源

2017-04-06 15:03:37 alphapilgrim

以下是Angular $过滤器的文档。 https://docs.angularjs.org/api/ng/filter/filter这适用于简单的过滤器，但如果你需要更复杂的东西，你可以使用angular.module（“yourModule”）构造你自己的过滤器。filter ）。 – Matt

@Matt，这就是我上面所做的。自定义过滤器。只是把他从控制器上关了出来，并不想让答案过于复杂。但感谢链接将包括作为参考编辑。 – alphapilgrim

哦，我很快就看到了这个答案。然后，另一个可能是使用Angular提供的过滤器 – Matt

我想你想的Array.filter功能，结合Array.some

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

来源

2017-04-06 14:58:59 Mtihc

感谢您的时间:)。我只会使用上面那个人的代码。 – Lapsio

这里是使用由角所提供的滤光器的另一种方法：

在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

来源

2017-04-06 15:19:31 Matt

谢谢！我也会试一试:)祝你有美好的一天。 – Lapsio

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

回答

相关问题