2016-09-16 58 views
0

我想換一個角度下降的格式了。下拉菜單用於過濾基於ng-model和customerFilter函數的Matches列表。以下是我目前有:如何格式化角度下拉菜單?

HTML

<div class="drop-toggle w-dropdown-toggle"> 
<select ng-model="filterVariable" ng-change= "customFilter(filterVariable, allMatches)" ng-options="XXX for XXX in categories"> 
    <option value="">By Categories</option> 
</select> 
</div> 

我想與所有的CSS把這個過濾器的功能,下面的格式,但我無法弄清楚如何獲得納克-model,ng-change和ng-options連接到它。

<div class="sort-drop w-dropdown" data-delay="0"> 
    <div class="drop-toggle w-dropdown-toggle"> 
    <div class="sort-label">By Category</div> 
    <div class="sort-icon w-icon-dropdown-toggle"></div> 
    </div> 
    <nav class="category-dropdown w-dropdown-list"> 
    <a class="category-link w-dropdown-link" href="#">Link 1</a> 
    <a class="category-link w-dropdown-link" href="#">Link 2</a> 
    <a class="category-link w-dropdown-link" href="#">Link 3</a> 
    </nav> 
</div> 


<div class="flex-offer-content-div" ng-repeat="match in Matches"> 
    <div class="re-image-div w-clearfix"> 
    <img class="rebate-image" src="{{match.offerDisplay}}" width="160"> 
    </div> 
</div> 

JS

$scope.categories = ["Men", "Women", "Children"]; 

$scope.Matches = [{id: 1, offerDisplay: "Men"}, {id: 2, offerDisplay: "Women"}, {id: 3, offerDisplay: "Women"}]; 

$scope.filterVariable = "" 

$scope.customFilter = function (cat, allMatches) { 
    if(cat === null){ 
     $scope.Matches = allMatches; 
    } else { 
     $scope.Matches = _.compact(_.map(allMatches, function(n){ 
     if(n.offerDisplay == cat)){ 
      return n; 
     } else { 
      return; 
     } 
     })) 
     return $scope.Matches; 
     } 
    }; 

回答