I am working with a JSON data set that I need to filter based on the selected option value. The select input is bound to an ng-model, but for some reason, the filter isn't functioning properly. Can anyone spot what mistake I might be making?
This is my HTML code snippet:
<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>
Here is my controller code:
.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
}
};
}]);