如何在AngularJS中使用选择（下拉）过滤数据？

Question

I have object which contains some festival offers. I have given my code below. I am new to this technology. Here, I want to filter ng-repeat values using dropdown(select).

Example: In select if I select all, it should show all coupons(which is available). Which means if I select all it should show get 50% lunch, dinner damaka, supper festival.

Example 2: In select if I select get 50% lunch, it should only get 50% lunch here. It should show two data: one is storeid: "886745", storeid: "777755".

Based on selection, it should show my code any one help me out.

 angular.module('myApp', []) .controller("myCntrl", function ($scope) { $scope.isCouponActivated = function(storeId){ var isCouponActivated = false; angular.forEach($scope.activatedcoupons, function(coupon){ if(coupon.storeid == storeId) { isCouponActivated = true; } }); return isCouponActivated; } $scope.coupons = [{ id: "1", storeid: "986745", couponname: "healthy breakfast offer", offermessage: "50% offer for break fast", noofcoupon: "10" }, { id: "2", storeid: "886745", couponname: "get 50% lunch", offermessage: "50% offer for Lunch", noofcoupon: "10" }, { id: "3", storeid: "690745", couponname: "dinner damaka", offermessage: "50% offer for dinner", noofcoupon: "10" }, { id: "4", storeid: "550745", couponname: "supper festiwal", offermessage: "80% offer for supper", noofcoupon: "10" }, { id: "5", storeid: "690733", couponname: "eve damaka snaks", offermessage: "20% offer for snaks", noofcoupon: "10", }, { id: "6", storeid: "777755", couponname: "get 50% lunch", offermessage: "50% offer for Lunch", noofcoupon: "50" } ] $scope.activatedcoupons = [{ id: "1", storeid: "986745", couponname: "healthy breakfast offer", offermessage: "50% offer for break fast", noofcoupon: "10", }, { id: "2", storeid: "690733", couponname: "eve damaka snaks", offermessage: "20% offer for snaks", noofcoupon: "10" } ] $scope.activate = function(id) { console.log(id); } }) 

 <div ng-app="myApp"> <div ng-controller="myCntrl"> <label>List Of Coupons</label> <br> <label for="singleSelect"> select: </label><br> <select name="singleSelect" ng-model="data.singleSelect"> <option value="0">all</option> <option value="healthy breakfast offer">healthy breakfast offer</option> <option value="get 50% lunch">get 50% lunch</option> <option value="dinner damaka">dinner damaka</option> <option value="supper festiwal">supper festiwal</option> <option value="eve damaka snaks">eve damaka snaks</option> </select><br> <span ng-bind="searchsubject"></span> <br> <br> <div ng-repeat="coupon in coupons | filter:search" data-ng-hide="isCouponActivated(coupon.storeid)" style="border-radius:5px;background: #8AC007;padding: 20px;"> <br>{{coupon.couponname}} <br> <br>{{coupon.offermessage}} <a class="tab-item" ng-click="activate(coupon.id)" id="appcolor"> <i class="icon ion-checkmark-circled" ></i> Activate </a> </div> </div> <BR> <BR> </div> 

my fiddle http://jsfiddle.net/qwdvdv55/2/

Answer 1

I changed your select model to be just singleSelect and updated your ng-repeat filter to filter based upon singleSelect.

<div ng-app="myApp">
<div ng-controller="myCntrl">
    <label>List Of Coupons</label>
    <br>
    <label for="singleSelect"> select: </label><br>
<select name="singleSelect" ng-model="singleSelect">
    <option value="">all</option>
    <option value="healthy breakfast offer">healthy breakfast offer</option>
    <option value="get 50% lunch">get 50% lunch</option>
    <option value="dinner damaka">dinner damaka</option>
    <option value="supper festiwal">supper festiwal</option>
    <option value="eve damaka snaks">eve damaka snaks</option>
</select>
        <br>
    <span ng-bind="searchsubject"></span>
    <br>
    <br>
    <div ng-repeat="coupon in coupons | filter:singleSelect" data-ng-hide="isCouponActivated(coupon.storeid)" style="border-radius:5px;background: #8AC007;padding: 20px;">
        <br>{{coupon.couponname}}
        <br>
        <br>{{coupon.offermessage}}

     <a class="tab-item" ng-click="activate(coupon.id)" id="appcolor">
  <i class="icon ion-checkmark-circled" ></i> 
  Activate
</a>
    </div>
</div>
<BR>
<BR>

Answer 2

Change your filter:

<div ng-repeat="coupon in coupons | 
     filter:data.singleSelect" data-ng-hide="isCouponActivated(coupon.storeid)" 
     style="border-radius:5px;background: #8AC007;padding: 20px;">
</div>

jsfiddle

Answer 3

Another option without changing your code is to implement the search() method referenced in your filter. Implementing a search method gives you the ability to customize the search. You can view it in this jsfiddle .

The search method will be called on each coupon. Return true to show it in the filter, or false to not show it.

$scope.search = function (coupon, index, coupons) {
    //if the search combobox value isn't defined, or if it's "all"
    if (!$scope.data || !$scope.data.singleSelect || $scope.data.singleSelect == "0")
        return true;

    if (coupon.couponname == $scope.data.singleSelect) {
        return true;
    } else {
        return false;
    }
}