AngularJS Filter on property from JSON/Object

Question

I am new to Angular and I am building a simple list (Also with ionic, but its using angular) of ice creams. I get the data from a JSON file with objects (an object for each ice cream). All objects have a property called "beschikbaar" what will be set to "Ja" or "Nee" (can also be true or false if thats making the job easier to do). In the list I made with a ng-repeat I would like to show only the items where the property "beschikbaar" is set to "Ja" or true. Otherwise I would like to hide them. I can't get it done.

Is it possible to fix this with just a simple filter in the view or must there be a custom filter to do this? I have no exp. with custom filters.

I have tried all kind of things, the filter in the view now is just an example of a try.

My code

VIEW

     <ion-item ng-repeat="item in icecreams | filter: {item.beschikbaar}:Ja" class="item-thumbnail-left" href="#">
        <img src="http://placehold.it/100x100">
        <h2>{{ item.name }}</h2>
        <p>{{ item.info }}</p>
        <h4>{{ item.type }}</h4>
        <h4>In de winkel tot: {{ item.end_date }}</h4>
      </ion-item>

JSON

[

        {
            "name" : "Aardbei Sorbet",
            "type" : "Sorbet",
            "info" : "Aardbei sorbet ijs is een frisse en zoete ijssmaak. Heerlijk voor in de zomer met bijvoorbeeld slagroom en chocolade ijs. Gemaakt met Hollandse Aardbeien.",
            "end_date" : "Maandag 17 Juli",
            "ingre" : "Hollandse aardbeien, melk, water, vanille roomijs",
            "suikervrij" : "Nee",
            "gluten" : "Nee",
            "beschikbaar" : "Ja"             
        },

        {
            "name" : "Mango Sorbet",
            "type" : "Sorbet",
            "info" : "Mango sorbet ijs is een exotische smaak. Met dit ijs krijg je het gevoel alsof je in een ver en exotisch land bent. Gemaakt met echte mango. Lekker te combineren met Ananas ijs.",
            "end_date" : "Maandag 17 Juli",
            "ingre" : "Mango stukjes, citroensap, water, vruchtvlees ananas",
            "suikervrij" : "Nee",
            "gluten" : "Ja",
            "beschikbaar" : "Ja"                        
        },

        {
            "name" : "Tompouchen ijs",
            "type" : "Special",
            "info" : "Een hema naast de winkel is garantie voor lekker ijs. Tompouchen ijs is een leuk experiment geworden. De romige smaak komt er in terug en ik heb er voor gezorgd dat hij niet extreem zoet is!",
            "end_date" : "Maandag 17 Juli",
            "ingre" : "Tompouchen, cakebeslag, room, melk, water",
            "suikervrij" : "Nee",
            "gluten" : "Ja",
            "beschikbaar" : "Ja"             
        },

        {
            "name" : "Drop ijs",
            "type" : "Snoep",
            "info" : "Ijs van drop, hoe tof is dat? Zoet van smaak, met een authentieke drop smaak. Gemaakt op basis van drop en vanille ijs.",
            "end_date" : "Maandag 17 Juli",
            "ingre" : "Tompouchen, cakebeslag, room, melk, water",
            "suikervrij" : "Nee",
            "gluten" : "Ja",
            "beschikbaar" : "Nee" 
        }

]

Controller

.controller('MainController', ['$scope', '$http', function($scope, $http){

  $http.get('js/data.json').success(function(data) {
    $scope.icecreams = data;
  });

}]);

I know there are a lot of questions of this subject but I just can't get it to work. Thanks for helping out!

Answer 1

You could achieve this without any filters, just use an ng-if .

<ion-item ng-repeat="item in icecreams" class="item-thumbnail-left" href="#" ng-if="item.beschikbaar == 'Ja'">
        <img src="http://placehold.it/100x100">
        <h2>{{ item.name }}</h2>
        <p>{{ item.info }}</p>
        <h4>{{ item.type }}</h4>
        <h4>In de winkel tot: {{ item.end_date }}</h4>
</ion-item>