Question

我是Angular的新手，我正在建立一个简单的清单（也有离子，但使用角度）冰淇淋。我从带有对象的JSON文件中获取数据（每个冰淇淋的对象）。所有对象都有一个名为“beschikbaar”的属性，它将被设置为“Ja”或“Nee”（如果这使得工作更容易，那么也可以是真或假）。在我用ng-repeat制作的列表中，我想只显示属性“beschikbaar”设置为“Ja”或true的项目。否则我想隐藏它们。我无法完成它。

是否可以通过视图中的简单过滤器来修复此问题，还是必须有自定义过滤器才能执行此操作？我没有exp。使用自定义过滤器。

我已经尝试了各种各样的东西，视图中的过滤器现在只是一个尝试的例子。

我的代码

查看

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

AngularJS从JSON / Object过滤属性

1 个答案: