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.\n\nPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum 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.\n\nEtiam 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.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.\n\nFusce consequat. Nulla nisl. Nunc nisl.\n\nDuis 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.\n\nPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum 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.\n\nEtiam 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.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.\n\nMorbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem.\n\nFusce consequat. Nulla nisl. Nunc nisl.\n\nDuis 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'}">

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

2 个答案: