角ng選項複雜的json數組

即時通訊設法使一個小的搜索引擎，使用角和json對象。即時排序查詢與3下拉列表鏈接，以便他們根據選擇填充他們自己。結構是這樣的：一個json對象，它包含一個分類數組，每個分類包含一個產品數組，每個產品數組保存諸如價格，名稱等參數，因此當用戶選擇一個分類時，第二個下拉菜單列表中會填入相關產品。並且當用戶選擇相關產品時，第三個下拉列表將填充該產品價格。角ng選項複雜的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>

繼承人plunker：

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

謝謝！

來源

2015-11-25 Jack

問題是什麼？ – Dvir

@Dvir在第三次選擇時，原始代碼不會篩選所選產品類型，並顯示所有價格。 –

是啊@Joaozito馬球明白了:-)回答是 – Jack

您需要在第三選擇應用過濾器，過濾只產品等於選擇：

<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

來源

2015-11-25 23:53:17

謝謝你我的朋友！你真是太棒了！我試圖從第二個下拉列表中使用ng模型進行過濾。我想我只是混淆了所有的語法！你是一個拯救生命的人！ – Jack

不客氣。並感謝您的過濾器'獨特'。我不知道那個過濾器。 –

角ng選項複雜的json數組

回答

相關問題