我想更改角度下拉的格式。下拉列表用于根据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连接到它。< / p>
<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;
}
};