Несколько выпадающих поисковых фильтров угловой

im работает над поисковой системой, которая принимает входные данные из 3 выпадающих списков. первый выпадающий список - категория, второй тип товара, третий - цена. каждый выпадающий список заполняется в соответствии с выбором предыдущего раскрывающегося списка, окончательный вывод - это один продукт, который соответствует всем трем выборам. Я использую webapi и получаю детали как объект json, который содержит массив объектов. Херес демо plunker с использованием аналогичной структуры JSon файла:Несколько выпадающих поисковых фильтров угловой

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

я не могу показаться, чтобы иметь возможность фильтровать и выводить данные из трех выбранных раскрывающиеся меню, любая помощь будет очень appriciated 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>

в ЯШ:

(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; 
      } 
     }) 
     } 
    ]); 
}());

источник

2015-11-20 Jack

Я надеюсь, что я understdood вас, здесь вы.

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

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

источник

2015-11-20 23:40:20

Удивительный мой друг! Это именно то, чего не хватало! Thenx !!! – Jack

Нет проблем, вы можете принять ответ, если его работа :) –

быстрый вопрос мой друг: какой лучший способ передать this.data из функции $ http.get, а не данные var? – Jack

Несколько выпадающих поисковых фильтров угловой

ответ

Смежные вопросы