Question

我有一些包含一些节日优惠的对象。我在下面给出了我的代码。我是这项技术的新手。在这里，我想使用下拉列表（选择）过滤ng-repeat值。

实施例：在选择中，如果我选择全部，则应显示所有优惠券（可用）。这意味着如果我选择它应该显示50％的午餐，晚餐damaka，晚餐节日。

示例2：如果我选择获得50％的午餐，那么在这里只能获得50％的午餐。它应该显示两个数据：一个是storeid：＆＃34; 886745＆＃34;，storeid：＆＃34; 777755＆＃34;。

根据选择，它应该显示我的代码，任何人帮助我。

＆＃13;

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

＆＃13;

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

＆＃13;

我的小提琴 http://jsfiddle.net/qwdvdv55/2/

Answer 1

我将您的选择模型更改为singleSelect并更新了ng-repeat过滤器以根据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

更改过滤器：

<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

不更改代码的另一个选项是实现过滤器中引用的search（）方法。通过实施搜索方法，您可以自定义搜索。您可以查看in this jsfiddle。

将在每张优惠券上调用搜索方法。返回true以在过滤器中显示它，或返回false以不显示它。

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

如何使用AngularJS中的select（下拉列表）过滤数据？

3 个答案: