[英]How to filter json using angular filter
嘿我對角度過濾器幾乎沒有問題。 我從wordpress導入帖子,我真的想用標簽過濾它們,比如,現在只顯示帶有tag = ENG的帖子,或者只顯示帶有tag = 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;
}
有什么想法嗎? 祝你好一天! :)
制作快速過濾器,可以根據您的需要進行更改。 希望能幫助到你。 Angular $過濾器文檔
這是一個帶有角度內置$ code的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>
我想你想要Array.filter
函數,結合Array.some
var postsWithTagSlugENG = data.data.posts.filter(function (post) {
return post.tags.some(function (tag) {
return tag.slug == "ENG"
});
});
這是使用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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.