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>