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