如何设置角度下拉菜单的格式?

时间:2016-09-16 23:15:45

标签: javascript css angularjs html5

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

1 个答案:

答案 0 :(得分:0)

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

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