我将如何使用angularjs按部门过滤帖子

Question

我希望能够使用angularjs ng-options按部门和标签和内容过滤帖子列表。我已经尝试了以下内容，但它不起作用。

代码 - 不确定为什么 ng-repeat 在这里不起作用。但它在我的编辑器上工作正常。

基本上，我还需要能够根据标签进行过滤，并避免重复标签或部门。

谢谢

angular.module('selectFilter', [])
.controller('NewsController', ['$scope', function($scope) {
$scope.articles = [{
"url": "porta-volutpat-erat",
"title": "porta volutpat erat",
"summary": "Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus. Pellentesque at nulla.",
"content": "Sed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.nnPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.nnCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.nnEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.",
"thumbnailImage": "http://dummyimage.com/215x173.png/ff4444/ffffff",
"departments": ["One", "Four"],
"tags": [
"Study",
"Business",
"Science",
"Law"
],
"isFeatured": true,
"publishedDate": "9/12/2017",
"type": "Content"
},
{
"url": "nibh-in-quis",
"title": "nibh in quis",
"summary": "Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh. Quisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est.",
"content": "Integer tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.nnPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.nnMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.nnFusce consequat. Nulla nisl. Nunc nisl.nnDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.",
"thumbnailImage": "http://dummyimage.com/135x135.png/dddddd/000000",
"departments": ["One", "Four", "five"],
"tags": [
"Research",
"Life",
"Business",
"Social"
],
"isFeatured": true,
"publishedDate": "3/16/2018",
"type": "Content"
}
];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-controller="NewsController">
<select ng-model="selectedDept" ng-options="d as departments for d in articles">
<option value="">Select Department</option>
</select>
<article ng-repeat="article in articles">
<h1><a href="{{ article.url }}">{{ article.title }}</a></h1>
<p>{{ article.summary }}</p>
<a href="{{ article.url }}">Read more &rarr;</a>
<span class="badge" ng-repeat="departments in article.departments">{{ departments }}</span>
</article>
</div>

Answer 1

首先，您可以准备如下所示的实际部门数组，并添加如下所示的过滤。

<article ng-repeat="article in articles | filter: { departments: selectedDept}">

下面是一个示例供参考！

angular.module('selectFilter', [])
.controller('NewsController', ['$scope', function($scope) {
$scope.articles = [{
"url": "porta-volutpat-erat",
"title": "porta volutpat erat",
"summary": "Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus. Pellentesque at nulla.",
"content": "Sed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.nnPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.nnCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.nnEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.",
"thumbnailImage": "http://dummyimage.com/215x173.png/ff4444/ffffff",
"departments": ["One", "Four"],
"tags": [
"Study",
"Business",
"Science",
"Law"
],
"isFeatured": true,
"publishedDate": "9/12/2017",
"type": "Content"
},
{
"url": "nibh-in-quis",
"title": "nibh in quis",
"summary": "Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh. Quisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est.",
"content": "Integer tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.nnPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.nnMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.nnFusce consequat. Nulla nisl. Nunc nisl.nnDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.",
"thumbnailImage": "http://dummyimage.com/135x135.png/dddddd/000000",
"departments": ["One", "Four", "five"],
"tags": [
"Research",
"Life",
"Business",
"Social"
],
"isFeatured": true,
"publishedDate": "3/16/2018",
"type": "Content"
}
];
$scope.departments = [];
for(var item of $scope.articles){
for(var a of item['departments']){
if($scope.departments.indexOf(a) === -1){
$scope.departments.push(a);
}
}
}
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-controller="NewsController" ng-app="selectFilter">
<select ng-model="selectedDept" ng-options="d for d in departments">
<option value="">Select Department</option>
</select>
<article ng-repeat="article in articles | filter: { departments: selectedDept}">
<h1><a href="{{ article.url }}">{{ article.title }}</a></h1>
<p>{{ article.summary }}</p>
<a href="{{ article.url }}">Read more &rarr;</a>
<span class="badge" ng-repeat="departments in article.departments">{{ departments }}</span>
</article>
</div>

Answer 2

两种方式：

一种是创建自定义过滤器：

myApp.filter('customFilter', [ function() {
return function (object) {
var array = [];
angular.forEach(object, function (post) {
if (post.Field == 'Department' || post.Field == 'Tags' || post.Field == 'Content')
array.push(post);
});
return array;
};
}]);

然后使用它：

<select ng-model="selectedDept" ng-options="d.departments for d in articles | customFilter">
<option value="">Select Department</option>
</select>

或使用过滤管：

ng-options="d.departments for d in articles | filter:{field:'Department'}">