AngularJS從JSON/Object過濾屬性

Question

我是Angular的新手，我正在建立一個簡單的列表（也有離子，但它使用角）冰淇淋。我從對象（每個冰淇淋的對象）的JSON文件中獲取數據。所有對象都有一個名爲「beschikbaar」的屬性，它將被設置爲「Ja」或「Nee」（如果這使工作更容易做到，也可以是真或假）。在我用ng-repeat製作的列表中，我只想顯示屬性「beschikbaar」設置爲「Ja」或true的項目。否則，我想隱藏它們。我無法完成。

是否可以通過視圖中的簡單過濾器解決此問題，還是必須有自定義過濾器才能完成此操作？我沒有經驗。與自定義過濾器。

我已經嘗試了各種各樣的東西，現在視圖中的過濾器只是一個嘗試的例子。

我的代碼

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('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>