是否可以使用多个下拉菜单在 Angular 中过滤 JSON

Question

我使用我对 Angular 的基本/初学者知识为客户构建了一个应用程序。我花了比大多数人更长的时间，但这对我来说是一次很棒的学习经历。

该应用程序导入 JSON 数据，该数据显示产品，每个返回的结果链接到包含更多信息的页面。

产品是手动过滤的，即我已经为所有可能的过滤器构建了页面（很长的路要走）。这显示为 4 个初始选项，然后您转到另一个页面，其中包含基于前一个选项的另外 4 个选项，然后从此处返回具有 4 个其他选项的最终页面，基于先前的选择返回一个列表。这种方式导致了大量的 JSON 文件集合，所有这些文件都基于可用的过滤器组合。

除了背景故事，我的客户现在希望能够使用打开页面上的下拉菜单过滤所有数据。这可能吗？

我的 JSON 数据如下所示

{"Level":"student","Style":"barb","Handle":"left","ItemCode":"5.25: 606603, 5.75: 606607","title":"Jaguar Prestyle Relax Leftie","Size":"5.25, 5.75","Price":"£50.00","Description":"One micro-serrated to prevent hair bunching or slippage, these are a particularly good choice for barbers. These scissors are ergonomically designed to reduce strain on your hands and wrists, with an offset handle, finger rest and finger ring inserts for extra comfort. Made from stainless steel with a matt satin finish.","picture":"img/stubarbleft/1.jpg"}

我想做的是显示返回的数据，这不是我可以做的问题。在页面的顶部，我想要一组下拉过滤器，所以顶部的过滤器过滤返回的数据，但 LEVEL 然后是 STYLE 的第二个（保持与选择的级别相同）和 HANDLE 的第三个选项（再次保持记住以前的选项）

这可以吗。我有点超出我的深度，但我会边走边学。

感谢您的宝贵时间

Answer 1

当然，这是可能的。我准备了一个自我解释的代码 sn-p 应该可以帮助你。

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope',
  function($scope) {

    $scope.model = {
      selectedStyle: "",
      selectedLevel: "",
      filterObject: { style : "", level : ""},
      recordDetails: undefined,
      options: {
        styles: ["", "style1", "style2"],
        levels: ["", "level1", "level2"]
      },
      data: [{
        "id": 1,
        "level": "level1",
        "style": "style1",
        "price": 100
      }, {
        "id": 2,
        "level": "level2",
        "style": "style2",
        "price": 200
      }, {
        "id": 3,
        "level": "level1",
        "style": "style2",
        "price": 300       
      }, {
        "id": 4,
        "level": "level2",
        "style": "style1",
        "price": 400
      }]
    };
    
    $scope.showDetails = function (record) {
      $scope.model.recordDetails = record;
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  
  <select name="styleSelect" id="styleSelect" ng-options="option for option in model.options.styles" ng-model="model.filterObject.style"></select>
  
  <select name="levelSelect" id="levelSelect" ng-options="option for option in model.options.levels" ng-model="model.filterObject.level"></select>

  Current filter object: {{model.filterObject}}
  
  <div ng-repeat="record in model.data | filter:model.filterObject">
    <a href="#" ng-click="showDetails(record)">
      <ul>
        <li>{{record.id}}</li>
        <li>{{record.level}}</li>
        <li>{{record.style}}</li>
      </ul>
    </a>
  </div>
  
  <div>
    Record details:
    {{model.recordDetails}}
  </div>
</div>

如果有什么需要进一步解释的，请告诉我。