Question

我重复一遍，我已成功通过输入进行过滤。我还有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"/>

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

1 个答案: