javascript - 如何在 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

只需使用 | filter在你的 ng-repeat 之后并将其保存到 ng-model它被添加到 <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]);

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