angularJS - filtering JSON by key

Question

I have a JSON data set that I want to filter by a select option value. I've bound the select to an ng-model, but now I can't get the filter to work. What am I doing wrong?

My html:

<div class="row portfolio" ng-controller="portfolioController">
    <div class="small-12 portfolioFilterContainer">
        <label class="portfolioFilterLabel">Filter:
            <select class="portfolioFilterSelect" ng-model="portfolioFilter">
                <option value="all">All</option>
                <option value="gitHub">Has repository</option>
                <option value="hasDemo">Has a working demo</option>
                <option value="finished">Finished</option>
            </select>
        </label>
    </div>
    <div class="small-12">
        <div class="row siteContainer" ng-repeat="site in EN | filter: portfolioFilter">
            <div class="small-4 columns">
                <img ng-if="site.left" class="portfolioSiteImage" ng-src="{{site.img}}">
            </div>
            <div class="small-8 columns">
                <h1 class="portoflioSiteHeading"><a href="#">{{site.heading}}</a></h1>
                <p class="portfolioSiteParagraph">{{site.desc}}</p>
            </div>
            <div class="small-4 columns">
                <img ng-if="!site.left" class="portfolioSiteImage" ng-src="{{site.img}}">
            </div>
        </div>
    </div>
</div>

my controller:

.controller('portfolioController', ['$scope', function($scope) {
        $scope.portfolioFilter = 'all';
        $scope.EN = {
            w1: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: true,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            },
            w2: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: false,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            },
            w3: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: true,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            },
            w4: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: false,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            }
        };
    }]);

Answer 1

You can't use the regular filter since $scope.EN is not an array. You could use ng-if instead:

ng-repeat="site in EN" ng-if="site[portfolioFilter]"

If you prefer filter - change the data to be an array and use custom filter:

ng-repeat="site in sites | filter: myFilter"

where myFilter is defined this way:

$scope.myFilter = function(val) {
    return val[$scope.portfolioFilter];
}