使用 AngularJS 进行高级过滤

Question

我希望使用 AngularJS 按类别和位置过滤以下列表。我遇到的困难是在过滤发生后能够将结果正确地嵌套在各自的类别下（见下文）。

var jobs = [
    {
        title: "Software Engineer",
        category: "Engineering",
        location: "New York"
    },
    {
        title: "Web Developer",
        category: "Engineering",
        location: "Chicago"
    },
    {
        title: "UX Designer",
        category: "Design",
        location: "New York"
    }
]

这是所需的输出（另请注意按字母顺序排列的类别）：

设计
用户体验设计师

工程
软件工程师
网页开发人员

任何帮助将不胜感激。谢谢！

Answer 1

这是一个工作示例，其中包含 plnkr 上的数据，使用 AngularJS Group By Directive without external Dependencies:

中的过滤器解决方案

http://plnkr.co/edit/w5UJUN?p=preview

Answer 2

你的心里有没有这样的想法：

  <b>Design</b>
  <ul>
      <li ng-repeat="job in jobs | filter: { category:'Design'}">
        {{job.title}}
      </li>
  </ul>
  <b>Engineering</b>
  <ul>
      <li ng-repeat="job in jobs | filter: { category:'Engineering'}">
        {{job.title}}
      </li>
  </ul>

正在工作JSFiddle。

Answer 3

我将按如下方式重新构造我的 JSON：

  $scope.parsedJobs = [];
  angular.forEach($scope.jobs, function(value, key) {
    var j = $scope.parsedJobs.filter(function(element) {
      return element.category == value.category;
    });
    if (j.length > 0) {
      $scope.parsedJobs[0].elements.push({
        title: value.title, 
        location: value.location
      });
    } else {
      $scope.parsedJobs.push({
        category: value.category,
        elements: [{
          title: value.title, 
          location: value.location
        }]
      });
    }
  });

小提琴

Answer 4

AngularJS 中的高级过滤可以通过组合自定义过滤器和表达式来根据用户输入细化数据来实现。例如，您可以创建自定义过滤器来处理特定的数据操作或使用 AngularJS 的内置 $filter 服务进行动态过滤。将此与 ng-repeat 等指令配对可以轻松实时显示过滤后的数据。

有关专业的网页设计芝加哥服务和高级开发解决方案，请查看专家网页设计。他们专注于创建根据您的业务需求定制的、经过 SEO 优化的网站和应用程序。无论是 AngularJS、现代框架还是尖端的 Web 解决方案，他们的团队都能提供出色的成果。