Question

我正在开发一个从3个下拉列表中获取输入的搜索引擎。第一个下拉列表是类别，第二个是产品类型，第三个是价格。每个下拉列表根据前一个下拉列表的选择填充自己，最终输出是一个匹配所有三个选项的产品。我使用webapi并将细节作为包含对象数组的json对象接收。下面是一个使用类似结构json文件的demo plunker：

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

我似乎无法过滤并输出三个选定下拉列表中的数据任何帮助都会非常受欢迎 thenx

json

[{
"caregory": "Electronics",
"products": [{
    "product": "PC",
    "description": "Item4 Product Page",
    "price": 99.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
}]}]

html：

    <!DOCTYPE html>
<html ng-app="MyApp">
  <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>
    <div class="container" ng-controller="MyController">
      <form>
        <label for="caregory">Category</label>
        <select id="caregory" data-ng-model="selectedCategory" ng-options="option as option.caregory for option in caregories |  orderBy:'caregory'">
           <option value="">None</option>
        </select>
        <br />
        <br />
        <label for="filters">Product type</label>
        <select id="filters" ng-model="selectedCategory" ng-options="option.product as option.product for option in selectedCategory.products | unique: 'product'">
          <option value="">None</option>
        </select>
        <br>
        <br>
        <label for="filters">Price</label>
        <select id="filters" ng-model="selectedValue" ng-options="option.price as option.price for option in selectedCategory.products | unique: 'price'">
          <option value="">None</option>
        </select>
     <br>
     <br>     
     <button ng-click="selectedCategory=true">Search</button>     
      </form>
      <br />
      <br />
      <div ng-show="selectedCategory" ng-repeat="caregory in caregories |
                filter: { caregory : selectedCategory.Category }">
        <div ng-repeat="products in selectedCategory.products | orderBy:'-price' | filter:selectedCategory:strict ">    
        <div>{{products.caregory}}</div>      
        <div>{{products.description}}</div>       
        <div>{{products.price}}</div>        
      </div>
      </div>
    </div>
  </body>
</html>

js：

(function() {
  'use strict';

  angular.module('MyApp', ['angular.filter'])
    .controller('MyController', ['$scope', '$http',
      function($scope, $http) {
        $http.get('data.json')
          .success(function(data, status, header, config) {
            $scope.caregories = data;
            $scope.selectedCategory = $scope.categories[0];
        });

        // $scope

        $scope.$watch('selectedCategory',function(newVal){
          console.log('newValue ',newVal);
            if(!newVal){
            $scope.selectedCategory = undefined;
          }
        })
      }
    ]);
}());

Answer 1

我希望我能帮到你，你在这里。

＆＃13;

var data = [{
  "caregory": "Electronics",
  "products": [{
    "product": "PC",
    "description": "Item4 Product Page",
    "price": 99.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
  }]
}];

var app = angular.module('app', ['angular.filter']);

var Controller = function() {

  this.selected = {};
  this.data = data;
  
  var self = this;
  this.search = function(predicate)
  {
    self.searchPredicate = predicate;
  }
}

app.controller('ctrl', Controller);

＆＃13;

<body ng-app="app" ng-controller="ctrl as vm">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <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="vm.selected.category" ng-options="option as option.caregory for option in vm.data |  orderBy:'caregory'">
        <option value="">None</option>
      </select>
      <br />
      <br />
      <label for="filters">Product type</label>
      <select id="filters" ng-model="vm.selected.type" ng-options="option as option.product for option in vm.selected.category.products | unique: 'product'">
        <option value="">None</option>
      </select>
      <br>
      <br>
      <label for="filters">Price</label>
      <select id="filters" ng-model="vm.selected.price" ng-options="option as option.price for option in vm.selected.category.products | unique: 'price'">
        <option value="">None</option>
      </select>
    </div>
    <div class="form-group" ng-if="vm.selected.price">
      <button class="btn btn-primary" ng-click="vm.search(vm.selected.price)">Search</button>
    </div>
    
    <div ng-if="vm.searchPredicate">
      Searching for <b>{{vm.searchPredicate.product}}</b> in <b>{{vm.searchPredicate.description}}</b> with price <b>{{vm.searchPredicate.price | currency}}</b>
      </div>
  </form>

</body>

＆＃13;

多个下拉搜索过滤器角度

1 个答案: