Question

我尝试使用angular和json对象制作一个小型搜索引擎。我用链接的3个下拉列表对查询进行排序，以便根据选择自己填充它们。结构是这样的：一个json对象，它包含一个类别数组，每个类别包含一个产品数组，每个产品数组都包含诸如价格，名称等参数，因此当用户选择一个类别时，第二个下拉列表获得相关产品。当用户选择相关产品时，第三个下拉列表将填入此产品价格。

这是json：

[{
    "caregory": "Electronics",
    "products": [{
        "product": "PC",
        "description": "Item4 Product Page",
        "price": 99.99
    }, 
    {
        "product": "PC",
        "description": "Item4 Product Page",
        "price": 2999.99
    },{
         "product": "TV",
        "description": "lorem ipsum possum",
        "price": 250.00
    }]
},  {
    "caregory": "Home Design",
    "products": [{
        "product": "Paintings",
        "description": "awesome description about anything",
        "price": 200.00
    }, {
        "product": "Pencils",
        "description": "we are filters",
        "price": 29.99
    }, {
        "product": "Sharpies",
        "description": "loremloremlorem",
        "price": 89.00
    }
]
}]

这是js：

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

var Controller = function($scope,$http) {
  $http.get('data.json')
          .success(function(data) {
      $scope.data = data;


        });
        var data;
  $scope.selected = {};
  $scope.data = $scope.data;
  console.log($scope.data);
  var self = this;




  $scope.search = function(predicate)
  {
    $scope.searchPredicate = predicate;
  }  
}

app.controller('ctrl', Controller);

以下是观点：

<!DOCTYPE html>
<html ng-app="app">

  <head>
     <link rel="stylesheet" href="style.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script src="filters.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="ctrl">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <div class="jumbotron">
    <h1>Search engine</h1>


  </div>
  <form>
    <div class="form-group">
      <label for="caregory">Category</label>
      <select id="caregory" data-ng-model="selected.category" ng-options="option as option.caregory for option in data |  orderBy:'caregory'">
        <option value="">None</option>
      </select>
      <br />
      <br />
      <label for="filters">Product type</label>
      <select id="filters" ng-model="selected.type" ng-options="option as option.product for option in selected.category.products | unique: 'product'">
        <option value="">None</option>
      </select>
      <br>
      <br>
      <label for="filters">Price</label>
      <select id="filters" ng-model="selected.price" ng-options="option as option.price for option in selected.category.products | unique: 'price'">
        <option value="">None</option>
      </select>
    </div>
    <div class="form-group" ng-if="selected.price">
      <button class="btn btn-primary" ng-click="search(selected.price)">Search</button>
    </div>

    <div ng-if="searchPredicate">
      Searching for <b>{{searchPredicate.product}}</b> in <b>{{searchPredicate.description}}</b> with price <b>{{searchPredicate.price | currency}}</b>
      </div>
  </form>

</body>

</html>

继承人：

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

谢谢！

Answer 1

您需要在第三个选择上应用过滤器，以仅过滤等于所选的产品：

<select id="filters" 
    ng-model="selected.price" 
    ng-options="option as option.price for option in selected.category.products | filter: { product: selected.type.product } | unique: 'price'">
    <option value="">None</option>
 </select>

看看plunker

angular ng-options复数json数组

1 个答案: