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>