如何使用角度過濾器過濾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

回答

相關問題