Minimal Angularjs + Mixitup

Angular 1.2.14 Mixitup 2.0.4

by N T

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/2.0.4/jquery.mixitup.min.js"></script>
<div ng-controller="DrawingsController">
    
    <div class="controls">
        <label>Filter:</label>
        <button class="filter" data-filter="all">All</button>
        <button class="filter" 
                data-filter=".category-{{category}}" 
                ng-repeat="category in categories">{{category}}</button>
        
        <label>Sort:</label>
        <button class="sort" data-sort="myorder:asc">Asc</button>
        <button class="sort" data-sort="myorder:desc">Desc</button>
    </div>
    <div class="test" >
    <div id="MixItUpContainer1" class="container">
        <div    class="mix category-{{drawing.category}}" 
                data-myorder="{{drawing.value}}" 
                ng-repeat="drawing in drawings">Value : {{drawing.name}}</div>
    </div></div>

CSS

.container .mix {
    display: none;
    border-style:solid;
    border-color:#000000;
    padding:10px;
    margin:10px;
}
.container .mix.category-Elements {
    color:red;
}
.container .mix.category-Soft {
    color:blue;
}

JavaScript

var app = angular.module('app', []);

app.controller('DrawingsController',

function DrawingsController($scope) {
    $scope.categories = ['Soft', 'Elements'];

    $scope.drawings = [{
        name: 'Water',
        category: 'Elements',
        value: '2'
    }, {
        name: 'Fire',
        category: 'Elements',
        value: '1'
    }, {
        name: 'Air',
        category: 'Elements',
        value: '4'
    }, {
        name: 'Coton',
        category: 'Soft',
        value: '3'
    }, {
        name: 'Whool',
        category: 'Soft',
        value: '5'
    }];


});

    $(function () {
        $('#MixItUpContainer1').mixItUp();
    });