AngularJS过滤JSON / Object的属性

Question

我是Angular的新手，正在建立一个简单的冰淇淋列表（也使用离子型，但使用了angular）。 我从带有对象（每个冰淇淋的对象）的JSON文件中获取数据。 所有对象都有一个名为“ beschikbaar”的属性，该属性将设置为“ Ja”或“ Nee”（如果这样会使工作更容易进行，也可以为true或false）。 在用ng-repeat进行的列表中，我只想显示属性“ beschikbaar”设置为“ Ja”或true的项目。 否则我想隐藏它们。 我做不完

是否可以仅使用视图中的简单过滤器来解决此问题，还是必须有一个自定义过滤器才能做到这一点？ 我没有经验 与自定义过滤器。

我已经尝试了所有事情，现在视图中的过滤器只是一个尝试示例。

我的密码

视图

     <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('MainController', ['$scope', '$http', function($scope, $http){

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

}]);

我知道这个主题有很多问题，但我无法解决。 感谢您的帮助！

Answer 1

您可以使用任何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>