代码之家 › 专栏 › 技术社区 › Giesburts

JSON/Object属性上的AngularJS过滤器

ionic-framework json angularjs javascript

-1

Giesburts · 技术社区 · 9 年前

是否可以在视图中只使用一个简单的过滤器来解决这个问题,或者必须有一个自定义过滤器来解决这个问题?我没有自定义过滤器的经验。

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

我的代码

     <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;
  });

}]);

我知道这方面有很多问题,但我就是没法解决。谢谢你的帮助!

1 回复 | 直到 9 年前

Giesburts 9 年前

您可以在没有任何过滤器的情况下实现这一点,只需使用 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>