Angularjs ng重複動態過濾器

我有這樣的json。這是服務器響應。Angularjs ng重複動態過濾器

[ 
{ 
    "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鏈接：http://plnkr.co/edit/8ArGO1OvT7FHIV1ixSEA?p=preview

來源

2014-06-11 Ashisha Nautiyal

首先，沒有在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分以上的評分。解決方案可以更改爲只顯示特定的評分。

來源

2014-06-11 05:33:35 rchawdry

謝謝，而不是如果在其他兩個過濾器我想同時激活兩個 –

我更新瞭解決方案和jsfiddle同時啓用兩個過濾器。 – rchawdry

謝謝。那正是我期待的！ – Denis

Angularjs ng重複動態過濾器

回答

相關問題