如何格式化角度下拉菜单？

Question

我想更改角度下拉菜单的格式。 下拉菜单用于根据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;
      }
    };

Answer 1

说“格式”时，请具体说明。

希望这对您有所帮助。 如何在AngularJS中的选项中格式化文本？