2016-09-16 12 views
0

角度ドロップダウンのフォーマットを変更したいと思います。このドロップダウンは、ng-modelとcustomerFilter関数に基づいて一致リストをフィルタリングします。ここで私は、現在持っているものです。角度ドロップダウンメニューをフォーマットするにはどうすればよいですか?

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のすべてに、次の形式にこのフィルタの機能を持ってしたいのですが、私がNG取得する方法を見つけ出すことはできません-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; 
     } 
    }; 

答えて

関連する問題