使用 AngularJS 指令从选择中删除重复项

我正在构建一个事件应用程序，该应用程序使用Drupal中的JSON在AngularJS中显示事件（在Drupal模块内）。JSON 对象键之一是"流派"，我在选择下拉列表中使用它，以便用户可以按流派过滤事件。

我已经尝试了 ng-option 和 ng-repeat 方法来填充选择，我发现只有 ng-repeat 有效，但当然它会为具有特定类型的事件的每个实例添加一个选项 - 所以如果我有两个音乐事件，我会在选择中得到两个音乐选项。所以现在我正在尝试删除重复项。

我已经尝试了ui.unique，但这删除了除一个选项之外的所有选项，而不是重复项。我也尝试过自定义过滤器，但遇到了类似的问题。我认为数据或 AngularJS 应用程序的结构很奇怪，所以最好尝试一个指令，但我没有 JQuery 迷路了，需要帮助！我愿意接受任何建议。

杰伦

{"nodes":[
   {"node":{
       "title":"The Awesome Band",
       "date":"2015-03-14T00:00:00+00:00",
       "venue":"The Place",
       "image":{
           "src":"/images/band.jpg",
           "alt":"The Awesome Band at The Place"
            },
        "time":"8pm",
        "taxonomy":"Rock",
        "genre":"Music Event"
        }
     }]}

.JS

var weekEvents = angular.module('weekEvents',[]);
    jQuery(document).ready(function(){
        angular.bootstrap(document.getElementById('weekEvents-app'), ['weekEvents']);
    });
var weekEventsController = function($scope, $http){
    $http.get('/json/next7days').success(function(result){
        $scope.weekEvents = (function(){
            return result.nodes;
        })();
    });
};
weekEvents.directive('genreSelect', function(){
  return{
       restrict: "AE",
       link:function(scope, elem, attrs){
          elem.slice.call(elem.options)
          .map(function(a){
                if(this[a.value]){ 
                    elem.removeChild(a); 
                } else { 
                    this[a.value]=1; 
                } 
        },{});
    }
}
});

.HTML

<div id="weekEvents-app">
    <div class="col-md-8 col-sm-8"  ng-controller="weekEventsController">
        <h2>This week</h2>
        <select ng-model="showGenre" name="genreSelect" data-genre-select>
                <option value="All" selected>All</option>
                <option ng-repeat="event in weekEvents" value="{{event.node.genre}}">{{event.node.genre}}</option>
        </select>
        <div class="mainEventItem" ng-repeat="event in weekEvents | orderBy:sortOrder | filter:showGenre">  
            <main-item-container>
                <div class="mainItem" ng-click="expandItem()">
                    <img src="{{event.node.image.src}}" alt="{{event.node.image.alt}}" class="img-responsive mainItemImg"/>
                    <div class="mainItemDetails">
                    <h2 class="eventTitle">{{event.node.title}}</h2>
                    <p class="eventDate">{{event.node.date | date: 'EEEE'}} / {{event.node.field_time}} / {{event.node.venue}}</p>
                </div>
                <div class="animate-show mainItemDesc lightLink" ng-show='!collapsed'>
                    <p><strong>{{event.node.venue}} | {{event.node.cost}}</strong></p>
                    <p>{{event.node.description}}</p>
                    <a ng-href="{{event.node.Path}}">MORE</a>
                </div>
            </main-item-container>
        </div>
    </div>  
</div>