筛选由AngularJS多个复选框 [英] Filtering by multiple checkboxes in AngularJS

问题描述

我第一次张贴的问题就在这里，所以提前道歉，如果我违反任何堆栈溢出礼仪！ ： - ）

first time I've posted a question on here, so apologies in advance if I breach any Stack Overflow etiquette! :-)

我为了创建一个验证的概念，我的老板我有一些AngularJS首次一展身手。这是一个基本的汽车租赁房源的应用程序，在主柱的结果列表和过滤器面板下侧。我已经成功从一个JSON对象，结果拉，并应用基本过滤器，如下;

I'm having a go at some AngularJS for the first time in order to create a proof-of-concept for my boss. It's a basic car hire listings app, with a list of results in the main column, and a filter panel down the side. I've managed to pull in the results from a JSON object, and apply a basic filter, as below;

<article data-ng-repeat="result in results | filter:search" class="result">
    <h3>{{result.carType.name}}, &pound;{{result.price.value}}</h3>
    <img class="car-type" alt="{{result.carType.name}}" src="{{result.carType.image}}" />
    <ul class="result-features">
            <li>{{result.carDetails.hireDuration}} day hire</li>
            <li data-ng-show="result.carDetails.airCon">Air conditioning</li>
            <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
            <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
    </ul>
</article>

    

过滤器

<fieldset>
Doors: 
<select data-ng-model="search.carDetails">
    <option value="">All</option>
  <option value="2">2</option>
  <option value="4">4</option>
</select>   

</fieldset>

......有一件事我一直没能制定出尚未虽然，是如何添加一组复选框以应用过滤器，比如说，车型，这将有类似的选项'迷你'，'紧凑的，家庭等 - 并且用户将能够通过一个或多个选项来同时进行过滤。我知道我需要使用'NG-模式，也许'NG变'，我只是不知道如何将它应用到一组复选框的...？

...one thing I haven't been able to work out yet though, is how to add a group of checkboxes to apply a filter, for say, 'car type' which would have options like 'mini', 'compact', 'family' and so on - and the user would be able to filter by one or more option at a time. I know I need to use 'ng-model', and perhaps 'ng-change', I just don't know how to apply it to a group of checkboxes...?

更新：我创建了一个plunker所以你可以看到我到：
<一href=\"http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=$p$pview\">http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=$p$pview

Update: I've created a plunker so you can see where I'm up to: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

推荐答案

我想所有的复选框绑定到一个对象说：

I would bind all the checkboxes to one object say:

app.js

$scope.cartypes = {mini: false, compact:false};

index.html的

index.html

<input type="checkbox" data-ng-model="cartypes.mini"> Mini
<input type="checkbox" data-ng-model="cartypes.compact"> Compact

，然后创建一个自定义过滤函数返回的对象是否包含了勾选的选项全部（我假定这就是你想要的）。

And then create a custom filter function which returns whether the object contains all (I assume thats what you want) of the checked options.

app.js

app.filter('myfilter', function() {
    return function(items, options ) {
      // loop over all the options and if true ensure the car has them
      // I cant do this for you beacause I don't know how you would store this info in the car object but it should not be difficult
      return carMatches;
    };
});

然后，你可以把它添加到您的模板是这样的：

Then you can add it to your template like this:

index.html的

index.html

<article data-ng-repeat="result in results | filter:search | myfilter:cartypes" class="result">

这篇关于筛选由AngularJS多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！