如何格式化有角度的下拉菜单？答案

【问题标题】：How do I format an angular drop down menu?如何格式化有角度的下拉菜单？
【发布时间】：2016-09-16 23:15:45
【问题描述】：

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

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

【问题讨论】：

标签： javascript css angularjs html

【解决方案1】：

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

希望对你有帮助 How to format text in options for select in AngularJS?

【讨论】：