Angularjs多重动态过滤器，带有ng重复

时间：2014-06-11 04:15:57

标签： javascript angularjs angularjs-filter

我有一个这样的json。这是服务器响应。

[
{
    "itemId": 1062,
    "businessType": "SPORT",
    "name": "Modern Martial Arts Vitor Shaolin Brazilian Jiu Jitsu",
    "websiteUrl": "http://www.yelp.com/biz/modern-martial-arts-vitor-shaolin-brazilian-jiu-jitsu-new-york",
    "rating": 5,
    "city": "New York",
    "address": "780 8th Ave (b/t 47th St & 48th St) Hell's Kitchen New York NY 10036",
    "imageUrl": "http://s3-media3.ak.yelpcdn.com/bphoto/JHk9p_jYX1QpQN4Im-p3jA/ms.jpg",
    "source": "Yelp",
    "price" :"6 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 8227,
    "businessType": "SPORT",
    "name": "TGA of Bergen County",
    "websiteUrl": "http://www.golftga.com/Default.aspx?alias=www.golftga.com/bergencounty",
    "city": "Wayne",
    "address": "17 North Jersey Lane Wayne NJ 07470 USA",
    "source": "Groupon",
    "price" :"26 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 3932,
    "businessType": "SPORT",
    "name": "Willowbrook Golf Center",
    "websiteUrl": "http://www.willowbrookgolfcenter.com",
    "city": "North Jersey",
    "address": "17 North Jersey Lane Wayne NJ 07470 USA",
    "source": "Groupon",
    "price" :"36 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 3918,
    "businessType": "SPORT",
    "name": "Church Street Boxing Gym & Pouncing Tigers",
    "websiteUrl": "http://www.csboxinggym.com/",
    "city": "New York City",
    "address": "201207 West 42nd Street New York NY 10036 USA",
    "source": "Groupon",
    "price" :"106 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 1100,
    "businessType": "SPORT",
    "name": "CKO Kickboxing Carroll Gardens",
    "websiteUrl": "http://www.yelp.com/biz/cko-kickboxing-carroll-gardens-brooklyn-2",
    "rating": 4,
    "city": "Brooklyn",
    "address": "562 Court St (b/t Hamilton Ave & Garnet St) Carroll Gardens Brooklyn NY 11231",
    "imageUrl": "http://s3-media2.ak.yelpcdn.com/bphoto/guwuh08U_tYTyRsjLQIJ-w/ms.jpg",
    "source": "Yelp",
    "price" :"29$",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 462,
    "businessType": "SPORT",
    "name": "TITLE Boxing Club",
    "websiteUrl": "http://www.titleboxingclub.com",
    "city": "Wayne",
    "address": "Wayne NJ 07470 USA",
    "source": "Groupon",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 474,
    "businessType": "SPORT",
    "name": "Centercourt Athletic Club of Morristown",
    "websiteUrl": "http://www.centercourtclub.com/club/scripts/section/section.asp?CLNK=1&NS=CMT",
    "city": "Wayne",
    "address": "Wayne NJ 07470 USA",
    "source": "Groupon",
    "price":"1008 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 3326,
    "businessType": "SPORT",
    "name": "Legends Baseball Instruction",
    "websiteUrl": "http://www.legendsbaseballinstruction.com",
    "city": "North Jersey",
    "address": "17 North Jersey Lane Wayne NJ 07470 USA",
    "source": "Groupon",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 1104,
    "businessType": "SPORT",
    "name": "Adirondack Sailing",
    "websiteUrl": "http://www.yelp.com/biz/adirondack-sailing-new-york",
    "rating": 4,
    "city": "New York",
    "address": "62 Chelsea Piers New York NY 10011",
    "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/FwpUOlPWSpLlEteBGukcpg/ms.jpg",
    "source": "Yelp",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Friend",
    "suggestingUser": {
        "userId": 4,
        "firstName": "Ashish",
        "lastName": "Chandra",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
    }
},
{
    "itemId": 1709,
    "businessType": "SPORT",
    "name": "Manhattan Sailing Club",
    "websiteUrl": "http://www.yelp.com/biz/manhattan-sailing-club-new-york",
    "rating": 4,
    "city": "New York",
    "address": "385 S End Ave Ste 6H Battery Park New York NY 10280",
    "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/9yvzeSYaKfguvDUzF69xvw/ms.jpg",
    "source": "Yelp",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Friend",
    "suggestingUser": {
        "userId": 4,
        "firstName": "Ashish",
        "lastName": "Chandra",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
    }
},
{
    "eventId": 9743,
    "description": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
    "event_date": "2015-01-31 00:00:00.0",
    "venue_name": "Barclays Center Parking Lots",
    "city": "Brooklyn",
    "urlpath": "http://www.stubhub.com/parking-passes-only-igor-krutoi-gala-concert-brooklyn-barclays-center-parking-lots-31-1-2015-9004479",
    "totalTickets": "0.0",
    "title": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
    "ancestorGenreDescriptions": "[All tickets, Concert tickets, Artists H - K, Igor Krutoi Gala Tickets]",
    "itemType": "Event",
    "category": "Concert",
    "source": "Stubhub",
    "suggestionCriteria": "following",
    "suggestedBy": "FriendSuggest",
    "suggestingUser": {
        "userId": 4,
        "firstName": "Ashish",
        "lastName": "Chandra",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
    },
    "timeLine": "January 31 at 07:01 PM",
    "startDate": "2015-01-31 00:00:00.0",
    "endDate": "2015-01-31 00:00:00.0",
    "address": "Barclays Center Parking Lots\nBrooklyn,New York 11217",
    "isBooked": true
}

];

我把它放在ng-repeat中。我waana制作一个过滤器，根据评级（1,2,3,4,5）和价格（0-9; 10 -99,100-999）过滤这些项目。 我不知道如何继续进行。任何帮助？

Plunker Link：http://plnkr.co/edit/8ArGO1OvT7FHIV1ixSEA?p=preview

1 个答案:

答案 0 :(得分：1)

首先，JSON中存在价格代表方式的问题。例如，

"price" :6 $;

无效，应列为

"price" :6 ,

有几种价格会发生这种情况。接下来，您可以使用以下

HTML 

<div ng-app="myApp" ng-controller='MainCtrl'>
    Rating : <select ng-model='filterParams.rating' ng-options='i for i in ratingParams'><option value=''></option></select>
     &nbsp;&nbsp;
    Price : <select ng-model='filterParams.price' ng-options="p.range for p in priceParams"><option value=''></option></select>
    <hr/>
    <table class="table table-condensed table-striped" >
        <thead>
            <tr>
            <th>Id</th>
            <th>Type</th>
            <th>Name</th>
            <th>Rating</th>
            <th>Price</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="j in json | customFilter:filterParams">
            <td>{{j.itemId}}</td>
            <td>{{j.businessType}}</td>
            <td>{{j.name}}</td>
            <td>{{j.rating}}</td>
            <td>{{j.price}}</td>
        </tr>
        </tbody>
    </table>
</div>

以下Javascript：

var app = angular.module("myApp",[]);

app.filter("customFilter", function(){
    return function(items, filterParams){        
        var filteredItems = [];

        if (filterParams) {

            angular.forEach(items, function(value){
                var matchRating = true, matchPrice = true;

                // Ratings filter
                if (filterParams.rating){ matchRating = value.rating >= filterParams.rating;}

                // Price filter
                if (filterParams.price){ matchPrice = value.price >= filterParams.price.lower &&  value.price <= filterParams.price.upper;}

                // If items pass both filter, include them
                if (matchRating && matchPrice) {filteredItems.push(value);}
            })
        } 
        else {

            // If no filters specified
            filteredItems = items;   
        }
        return filteredItems;
    }
})

app.controller("MainCtrl", function($scope){
    $scope.priceParams = [
        {range : '0-9', lower: 0, upper:9},
        {range : '10-99', lower: 10, upper:999},
        {range : '100-999', lower: 100, upper:999}
     ];
    $scope.ratingParams = [1,2,3,4,5];

    $scope.json = [
    {
        "itemId": 1062,
        "businessType": "SPORT",
        "name": "Modern Martial Arts Vitor Shaolin Brazilian Jiu Jitsu",
        "websiteUrl": "http://www.yelp.com/biz/modern-martial-arts-vitor-shaolin-brazilian-jiu-jitsu-new-york",
        "rating": 5,
        "city": "New York",
        "address": "780 8th Ave (b/t 47th St & 48th St) Hell's Kitchen New York NY 10036",
        "imageUrl": "http://s3-media3.ak.yelpcdn.com/bphoto/JHk9p_jYX1QpQN4Im-p3jA/ms.jpg",
        "source": "Yelp",
        "price" : 6,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 8227,
        "businessType": "SPORT",
        "name": "TGA of Bergen County",
        "websiteUrl": "http://www.golftga.com/Default.aspx?alias=www.golftga.com/bergencounty",
        "city": "Wayne",
        "address": "17 North Jersey Lane Wayne NJ 07470 USA",
        "source": "Groupon",
        "price" :26,
        "rating" : 4,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 3932,
        "businessType": "SPORT",
        "name": "Willowbrook Golf Center",
        "websiteUrl": "http://www.willowbrookgolfcenter.com",
        "city": "North Jersey",
        "address": "17 North Jersey Lane Wayne NJ 07470 USA",
        "source": "Groupon",
        "price" :36,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 3918,
        "businessType": "SPORT",
        "name": "Church Street Boxing Gym & Pouncing Tigers",
        "websiteUrl": "http://www.csboxinggym.com/",
        "city": "New York City",
        "address": "201207 West 42nd Street New York NY 10036 USA",
        "source": "Groupon",
        "price" :106 ,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 1100,
        "businessType": "SPORT",
        "name": "CKO Kickboxing Carroll Gardens",
        "websiteUrl": "http://www.yelp.com/biz/cko-kickboxing-carroll-gardens-brooklyn-2",
        "rating": 4,
        "city": "Brooklyn",
        "address": "562 Court St (b/t Hamilton Ave & Garnet St) Carroll Gardens Brooklyn NY 11231",
        "imageUrl": "http://s3-media2.ak.yelpcdn.com/bphoto/guwuh08U_tYTyRsjLQIJ-w/ms.jpg",
        "source": "Yelp",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 462,
        "businessType": "SPORT",
        "name": "TITLE Boxing Club",
        "websiteUrl": "http://www.titleboxingclub.com",
        "city": "Wayne",
        "address": "Wayne NJ 07470 USA",
        "source": "Groupon",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 474,
        "businessType": "SPORT",
        "name": "Centercourt Athletic Club of Morristown",
        "websiteUrl": "http://www.centercourtclub.com/club/scripts/section/section.asp?CLNK=1&NS=CMT",
        "city": "Wayne",
        "address": "Wayne NJ 07470 USA",
        "source": "Groupon",
        "price":1008,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 3326,
        "businessType": "SPORT",
        "name": "Legends Baseball Instruction",
        "websiteUrl": "http://www.legendsbaseballinstruction.com",
        "city": "North Jersey",
        "address": "17 North Jersey Lane Wayne NJ 07470 USA",
        "source": "Groupon",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 1104,
        "businessType": "SPORT",
        "name": "Adirondack Sailing",
        "websiteUrl": "http://www.yelp.com/biz/adirondack-sailing-new-york",
        "rating": 4,
        "city": "New York",
        "address": "62 Chelsea Piers New York NY 10011",
        "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/FwpUOlPWSpLlEteBGukcpg/ms.jpg",
        "source": "Yelp",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Friend",
        "suggestingUser": {
            "userId": 4,
            "firstName": "Ashish",
            "lastName": "Chandra",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
        }
    },
    {
        "itemId": 1709,
        "businessType": "SPORT",
        "name": "Manhattan Sailing Club",
        "websiteUrl": "http://www.yelp.com/biz/manhattan-sailing-club-new-york",
        "rating": 4,
        "city": "New York",
        "address": "385 S End Ave Ste 6H Battery Park New York NY 10280",
        "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/9yvzeSYaKfguvDUzF69xvw/ms.jpg",
        "source": "Yelp",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Friend",
        "suggestingUser": {
            "userId": 4,
            "firstName": "Ashish",
            "lastName": "Chandra",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
        }
    },
    {
        "eventId": 9743,
        "description": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
        "event_date": "2015-01-31 00:00:00.0",
        "venue_name": "Barclays Center Parking Lots",
        "city": "Brooklyn",
        "urlpath": "http://www.stubhub.com/parking-passes-only-igor-krutoi-gala-concert-brooklyn-barclays-center-parking-lots-31-1-2015-9004479",
        "totalTickets": "0.0",
        "title": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
        "ancestorGenreDescriptions": "[All tickets, Concert tickets, Artists H - K, Igor Krutoi Gala Tickets]",
        "itemType": "Event",
        "category": "Concert",
        "source": "Stubhub",
        "suggestionCriteria": "following",
        "suggestedBy": "FriendSuggest",
        "suggestingUser": {
            "userId": 4,
            "firstName": "Ashish",
            "lastName": "Chandra",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
        },
        "timeLine": "January 31 at 07:01 PM",
        "startDate": "2015-01-31 00:00:00.0",
        "endDate": "2015-01-31 00:00:00.0",
        "address": "Barclays Center Parking Lots\nBrooklyn,New York 11217",
        "isBooked": true
    }
]

});

您可以在以下JSFiddle中看到这一点：http://jsfiddle.net/FvTjD/33/。当前解决方案表示评级大于或等于，因此，如果您选择评级为3，它将过滤那些评级为3及以上的项目。可以更改解决方案，以便轻松显示特定评级。

相关问题
最新问题