6

我第一次在这里发布问题，所以如果我违反任何 Stack Overflow 礼仪，请提前道歉！:-)

我第一次尝试一些 AngularJS，以便为我的老板创建一个概念验证。这是一个基本的汽车租赁列表应用程序，主列中有一个结果列表，侧面有一个过滤器面板。我设法从 JSON 对象中提取结果，并应用基本过滤器，如下所示；

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

...我还没有解决的一件事是如何添加一组复选框来应用过滤器，例如“汽车类型”，它有“迷你”、“紧凑”等选项， 'family' 等等 - 用户可以一次过滤一个或多个选项。我知道我需要使用'ng-model'，也许还有'ng-change'，我只是不知道如何将它应用于一组复选框......？

更新：我创建了一个 plunker，所以你可以看到我在做什么： http ://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

4

2 回答 2

8

我会将所有复选框绑定到一个对象说：

应用程序.js

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

索引.html

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

然后创建一个自定义过滤器函数，它返回对象是否包含所有（我假设这就是你想要的）选中的选项。

应用程序.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;
    };
});

然后你可以像这样将它添加到你的模板中：

索引.html

<article data-ng-repeat="result in results | filter:search | myfilter:cartypes" class="result">
于 2013-05-09T10:01:10.677 回答
0

我已经实现了这样的解决方案：

@myapp.filter "storeFilter", ->
  (stores, type) ->
    _.filter stores, (store) -> type[store.name]

在我看来，我是这样通过的：

store in stores | storeFilter:store_type
于 2013-11-27T19:58:30.937 回答