2015-11-06 101 views
0

我正在嘗試將MixItUp與AngularJS一起使用,它可以與按鈕一起工作,但是當試圖在下拉菜單中使用它時,它不會。MixItUp與AngularJs的下拉篩選器?

<select class="filter" ng-model="selectedCategory" 
     ng-options="'.' + cat.id as cat.name for cat in categories track by cat.id"> 
    <option value="">-- Category --</option> 
</select> 
<pre>{{ selectedCategory }}</pre> 

<div mix-it-up class="container"> 
    <div class="mix {{widget.categoryId}}" data-myorder="{{widget.name}}" 
     ng-repeat="widget in widgets"> 
        {{widget.name}} 
    </div> 
    <div class="gap"></div> 
    <div class="gap"></div> 
</div> 

http://jsfiddle.net/dp31o591/2/

回答

0

我想這一個。只需要對改變使用事件:

HTML:

<select class="form-control" ng-model="category" ng-change="filterCategory(category)" 
ng-options="'.cat' + cat.id as cat.name for cat in categories track by cat.id"> 
     <option value="" ng-model="category" 
       ng-change="filterCategory(category)">All</option> 
      </select> 

和控制器:

$scope.filterCategory = function (cat) { 
    cat = cat === null ? 'all' : cat 
    $('#sandbox').mixItUp('filter', cat); 
}; 

這就是工作的jsfiddle: http://jsfiddle.net/dp31o591/3/