通过文本输入和复选框进行角度过滤

Question

我有一个 ng 重复，我已成功通过输入进行过滤。我还有 3 个与我希望能够用来过滤掉某些结果的数据相关的复选框。我已经尝试将所有字段放在一个数组中（以您订购的相同方式）但这似乎没有帮助。

我怎样才能达到我想要的结果？

我的模板看起来像：

<input ng-model="searchByName.name" type="text" placeholder="Search by name" autofocus>
<ul class="list">
    <li class="item item-toggle">
       ATM
         <input type="checkbox" value="1" ng-model="hasATM.atm">
    </li>
    <li class="item item-toggle">
       Power
         <input type="checkbox" value="1" ng-model="hasPower.power">
    </li>
    <li class="item item-toggle">
       Water
         <input type="checkbox" value="1" ng-model="hasWater.water">
    </li>
</ul>


<ion-list>
    <ion-item class="item-remove-animate item-icon-right" ng-repeat="harbour in harbours | filter:[searchByName, hasATM, hasPower, hasWater] | orderBy:[sortOption, 'distance']" type="item-text-wrap" href="#/tab/harbours/{{harbour.id}}">
        <h2>{{harbour.name}}</h2>
    </ion-item>
</ion-list>

我的数据格式为：

"harbours": [
        {
        "id": 3,
        "name": "Lorem",
        "latitude": 51.000000,
        "longitude": 0.000000,
        "mooring": 3,
        "swimming": 2,
        "shopping": 4,
        "dining": 5,
        "nightlfe": 3,
        "noise": 1,
        "water": 0,
        "power": 0,
        "atm": 1,
        "distance": 0,
        "description": "lorem ipsum",
        "image":"tmp.jpg"
      }, {
        "id": 4,
        "name": "Ipsum",
        "latitude": 52.00000,
        "longitude": 0.00000,
        "mooring": 3,
        "swimming": 4,
        "shopping": 4,
        "dining": 5,
        "nightlfe": 1,
        "noise": 5,
        "water": 0,
        "power": 0,
        "atm": 1,
        "distance": 0,
        "description": ""
      }
]

仅使用“searchByName”作为我的过滤器（不在数组中）效果很好，但是当我尝试自己使用任何复选框时，数据列表就会消失。

“searchByName”在数组中使用时也会使列表消失，所以我假设这不能像我希望的那样简单地实现。

如何实现按名称搜索和复选框过滤？

谢谢

Answer 1

我认为，将所有过滤器存储在一个对象中要容易得多（例如，我将在示例中使用yourFilter 变量）。使用这种方法，您只需将变量传递给filter。

这里的下一个问题是，您的复选框存储 false 或 true 值，因为您应用于它们的 value 标记没有任何效果。如果您选择其中一个复选框，将找不到任何结果，因为您的所有布尔字段都有0 或1 值。 要更改复选框存储值的格式，您应该使用ng-true-value 和ng-false-value 重构它们，以便它们可用于过滤您的数据。

之后，您的带有搜索输入的模板将如下所示：

<input type="text" ng-model="yourFilter.name" placeholder="Search by name"/>
<ul>
  <li>
   ATM
   <input type="checkbox" ng-model="yourFilter.atm" ng-true-value="1" ng-false-value="0"/>
  </li>
  <li>
   Power
   <input type="checkbox" ng-model="yourFilter.power" ng-true-value="1" ng-false-value="0"/>
  </li>
  <li>
   Water
   <input type="checkbox" ng-model="yourFilter.water" ng-true-value="1" ng-false-value="0"/>
  </li>
</ul>

<ul>
  <li ng-repeat="harbour in harbours | filter:yourFilter">
    <h2>{{harbour.name}}</h2>
  </li>
</ul>

Example on plunker.

Documentation about input[checkbox].

---

请记住，加载页面后，复选框对过滤结果没有任何影响。如果你想通过它们的默认值进行过滤，你应该使用ng-init 指令。

<input type="checkbox" ng-model="yourFilter.water" ng-init="yourFilter.water = '0'" ng-true-value="1" ng-false-value="0"/>