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

Question

我有一些节日的礼物。 我在下面给出了我的代码。 我是这项技术的新手。 在这里，我想使用dropdown（select）过滤ng-repeat值。

示例：如果我全选，则在select中应显示所有优惠券（可用）。 这意味着，如果我选择所有显示的内容，则将获得50％的午餐，晚餐damaka，晚餐节。

示例2：在select中，如果我选择获得50％的午餐，则这里只应获得50％的午餐。 它应该显示两个数据：一个是storeid：“ 886745”，storeid：“ 777755”。

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

 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> 

我的小提琴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（）方法。 实施搜索方法使您能够自定义搜索。 您可以在此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;
    }
}