通过文字输入和复选框角过滤器 [英] Angular filter by text input and checkbox
问题描述
我有一个NG重复说我成功地由一个输入滤波。我也有3有关，我希望能够用它来过滤掉某些结果的数据复选框。我已经试图把所有字段以阵列（在你最好ORDERBY相同的方式），但是这并不出现，以帮助
我如何才能实现我想要的结果？
我的模板是这样的：
＆LT;输入NG模型=searchByName.name类型=文本占位符=按名称搜索自动对焦＆GT;
＆LT; UL类=清单＆GT;
＆LT;李班=项项拨动＆GT;
自动取款机
＆LT;输入类型=复选框值=1NG模型=hasATM.atm＆GT;
＆LT; /李＆GT;
＆LT;李班=项项拨动＆GT;
功率
＆LT;输入类型=复选框值=1NG模型=hasPower.power＆GT;
＆LT; /李＆GT;
＆LT;李班=项项拨动＆GT;
水
＆LT;输入类型=复选框值=1NG模型=hasWater.water＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT;离子列表＆gt;
＆LT;离子项目类=项目 - 删除 - 动画项目图标右NG重复=海港港口|过滤器：[searchByName，hasATM，hasPower，hasWater] |排序依据：[sortOption，距离]类型=项目文本换行的href =＃/标签/港口/ {{harbour.id}}＆GT;
＆LT; H2＆GT; {{harbour.name}}＆LT; / H＆GT;
＆LT; /离子项目＆GT;
＆LT; /离子列表＆gt;
和我的数据是格式为：
港口：[
{
ID：3，
名：排版
纬度：51.000000，
东经：0.000000，
系泊：3，
游泳：2，
血拼：4，
餐饮：5，
nightlfe：3，
噪音：1，
水：0，
权力：0，
ATM：1，
距离：0，
说明：Lorem存有
形象：tmp.jpg
}，{
ID：4，
名：存有
纬度：52.00000，
东经：0.00000，
系泊：3，
游泳：4，
血拼：4，
餐饮：5，
nightlfe：1，
噪声：5，
水：0，
权力：0，
ATM：1，
距离：0，
说明：
}
]
只需使用searchByName作为我的过滤器（数组不是）的伟大工程，但是当我尝试使用任何自己的复选框，DataList控件就这样消失。
在阵列中使用时，searchByName使得列表中消失过，所以我假设这是无法实现的简单，如我所希望的。
我怎样才能做到的名字和复选框过滤搜索？
感谢您
我认为，它更容易到所有过滤器储存在同一个对象（例如，我将使用 yourFilter 中的示例变量）。通过这种方法，您可以您的变量只是传递给过滤。
这里的下一个问题，你的复选框商店假或真正的价值，因为值标签，您适用于他们，没有任何效果。如果你选择其中一个复选框，的任何结果不会被发现，因为你的所有布尔领域拥有 0 或 1 值。
要更改复选框的存储值的格式，你应该 NG-真值并重构它们 NG-假值，让他们可以用来筛选数据。
在与搜索输入您的模板将是这样的：
＆LT;输入类型=文本NG模型=yourFilter.name占位符=按名称搜索/＆GT;
＆LT; UL＆GT;
＆LT;立GT;
自动取款机
＆LT;输入类型=复选框NG模型=yourFilter.atmNG-真值=1NG-假值=0/＆GT;
＆LT; /李＆GT;
＆LT;立GT;
功率
＆LT;输入类型=复选框NG模型=yourFilter.powerNG-真值=1NG-假值=0/＆GT;
＆LT; /李＆GT;
＆LT;立GT;
水
＆LT;输入类型=复选框NG模型=yourFilter.waterNG-真值=1NG-假值=0/＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT; UL＆GT;
＆LT;李NG重复=，在港口码头|过滤器：yourFilter＆GT;
＆LT; H2＆GT; {{harbour.name}}＆LT; / H＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
记住，在加载页面后的复选框不会对筛选出的结果有任何影响。如果你想通过它们的默认值过滤，你应该使用 NG-INIT 指令。
＆LT;输入类型=复选框NG模型=yourFilter.waterNG-的init =yourFilter.water ='0'NG真值=1 NG-假值=0/＆GT;
I have an ng repeat that I'm successfully filtering by an input. I also have 3 checkboxes relating to the data that I want to be able to use to filter out certain results. I've tried putting all the fields in an array (in the same manner that you'd orderBy) but this doesn't appear to help.
How can I achieve my desired result?
My template looks like:
<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>
And my data is in the format of:
"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": ""
}
]
Using just "searchByName" as my filter (not in the array) works great but when I try and use any of the checkboxes by themselves, the datalist just disappears.
"searchByName" when used in the array makes the list disappear too so I'm assuming this can't be achieved as simply as I'd hoped.
How can I achieve the search by name and checkbox filtering?
Thank you
I think, that it's much easier to store all your filters in one object (For example, I'll use yourFilter variable in the example). With this approach you can just pass your variable to filter.
The next issue here, that your checkboxes store false or true value, because value tag, which you applied to them, doesn't have any effect. And if you choose one of the checkboxes, any result won't be found, because all your boolean fields has 0 or 1 value.
To change format of stored value of the checkboxes you should refactor them with ng-true-value and ng-false-value, so that they can be used to filter your data.
After that your template with search inputs will look like this:
<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>
Documentation about input[checkbox].
Remember, that after loading the page the checkboxes don't have any effect on filtered results. And if you want to filter by their default value, you should use ng-init directive.
<input type="checkbox" ng-model="yourFilter.water" ng-init="yourFilter.water = '0'" ng-true-value="1" ng-false-value="0"/>
这篇关于通过文字输入和复选框角过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
