通过 AngularJS 中的多个复选框过滤 [英] Filtering by multiple checkboxes in AngularJS
问题描述
我第一次在这里发布问题,如果我违反了任何 Stack Overflow 礼节,请提前道歉!:-)
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}}, £{{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-model',也许还有 'ng-change',我只是不知道如何将它应用于一组复选框......?
...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 以便您可以看到我在做什么:http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview
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
<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
<article data-ng-repeat="result in results | filter:search | myfilter:cartypes" class="result">
这篇关于通过 AngularJS 中的多个复选框过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!