Question

我需要过滤AngularJS中的嵌套JSON数组。 JSON结构如下：

articles_data: [{
    title: 'Bigfoot Afoot',
    tags: ['True stories', 'forests'],
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
    category: 'Bigfoot'
  },
  {
    title: 'Lockness Sighted!',
    tags: ['Sightings', 'Lakes'],
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
    category: 'Nessy'
  },
  {
    title: 'Jacktalopes Everywhere',
    tags: ['Rabbits', 'cities'],
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
    category: 'Jacktalope'
  }
]

我正在遍历ng-repeat：

<div class="col-md-7 articles">
  <section>
    <div class="card filter" ng-repeat="article in articles.articlemanager.articles track by $index">
      <div class="card-header">
        {{article.title}} &nbsp;<small>{{article.tags.join()}}</small>
        <span class="badge badge-{{article.category}} float-right">{{article.category}}</span>
      </div>
      <div class="card-body">
        <p>
          {{article.description}}
        </p>
      </div>
    </div>
  </section>
</div>

这显示了我的文章，但我需要更进一步，并按名称或标签对其进行过滤：

<form>
  <div class="form-group">
    <label for="filterName">Filter by name</label>
    <input type="text" class="form-control" id="filterName">
  </div>
  <div class="form-group">
    <label for="filterTags">Filter by tags</label>
    <input type="text" class="form-control" id="filterTags">
  </div>
</form>

我真的不知道如何在AngularJS中使用过滤器，但时间紧迫，可以使用帮助。预先感谢。

Answer 1

只需在| filter之后使用ng-repeat，然后将其保存到添加到ng-model的{{1}}中。您可以通过仅使用<input>来添加更多filter。您可以了解有关过滤器here的更多信息。

var app = angular.module("DummyApp", []);

var DummyController = function($scope) {
  $scope.articles_data = [{
      title: 'Bigfoot Afoot',
      tags: ['True stories', 'forests'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Bigfoot'
    },
    {
      title: 'Lockness Sighted!',
      tags: ['Sightings', 'Lakes'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Nessy'
    },
    {
      title: 'Jacktalopes Everywhere',
      tags: ['Rabbits', 'cities'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Jacktalope'
    }
  ]
}

app.controller("DummyController", ["$scope", DummyController]);

Answer 2

取决于您的实际需求，但是使用ng-repeat时最简单的方法是过滤器功能。

<li ng-repeat="x in names | orderBy:'FirstName'">

这里是文档的链接，您可以使用许多选项。 AngularJS Documentation filter function

Answer 3

<div class="card filter" ng-repeat="article in articles.articlemanager.articles | filter : filterName | filter: filterTags track by $index">

如何在AngularJS中过滤嵌套的JSON数据

3 个答案: