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

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

只需在ng-repeat 之后使用| filter 并将其保存到ng-model 中，该<input> 将添加到<input> 中。您可以添加更多filters，只需使用| 进行更多管道传输即可。您可以了解有关过滤器的更多信息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]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DummyApp">
  <div ng-controller="DummyController">
    <form>
      <div class="form-group">
        <label for="filterName">Filter by name</label>
        <input type="text" class="form-control" id="filterName" ng-model="filterName">
      </div>
      <div class="form-group">
        <label for="filterTags">Filter by tags</label>
        <input type="text" class="form-control" id="filterTags" ng-model="filterTag">
      </div>
    </form>
    <div class="col-md-7 articles">
      <section>
        <div class="card filter" ng-repeat="article in articles_data | filter:filterName | filter:filterTag">
          <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>
  </div>
</div>

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">