使用 angularjs 过滤器取消选中复选框时显示所有结果答案

【问题标题】：Display all results when a checkbox is unchecked with angularjs filters使用 angularjs 过滤器取消选中复选框时显示所有结果
【发布时间】：2015-08-04 14:16:23
【问题描述】：

我只是想做一件让我头疼的简单事情。

在使用 Angularjs 的应用程序中，我有一个包含值的字典。我想使用复选框过滤我的值。如果选中该复选框，则使用具有 is_streaming : TRUE 的元素刷新列表。但是如果未选中该复选框。我想显示所有结果。

目前，当复选框被选中时，它只显示好的事件（这正是我想要的）但是当我取消选中时，我只有 FALSE 的元素。

var events = [{
    id: 0,
    event_name: 'Concert 1',
    is_streaming: 'true'
  }, {
    id: 1,
    event_name: 'Concert 2',
    is_streaming: 'true'
  },{
    id: 2,
    event_name: 'Concert 3',
    is_streaming: 'true'
  }



<ion-toggle ng-model="is_streaming" toggle-class="toggle-calm">En ce moment</ion-toggle>
<ion-list>
 <ion-item class="" ng-repeat="event in filtered=(events | filter:is_streaming)" type="item-text-wrap" href="#/tab/chats//{{event.id}}">
  <div class="player" ng-show="{{event.is_streaming}} == true"></div>
 </ion-item>
</ion-list>

任何帮助或建议都会很高兴听到。谢了

【问题讨论】：

你能放一个小提琴/plunker吗？

标签： angularjs checkbox filter

【解决方案1】：

编辑：

更改您的复选框属性以使用 ng-false-value 并将其设置为 null：

<ion-toggle ng-model="search.is_streaming" ng-false-value="null" toggle-class="toggle-calm">En ce moment</ion-toggle>

然后你可以使用：

<ion-item class="" ng-repeat="event in events | filter: search.is-streaming" type="item-text-wrap" href="#/tab/chats//{{event.id}}">

【讨论】：

我试过你的例子，但控制台给了我一个错误'code'Error: [ngModel:constexpr] Expected constant expression for ngFalseValue, but saw ``.'code'
有趣。非常适合我。将不得不在离子项目中进行测试。在发布之前，我在 Plunker 中使用了一个复选框进行了测试。
对不起，你是对的，最新版本也给我带来了错误。只需将 ng-false-value 设置为 null，这很容易解决。
与 ng-false-value="null" 完美搭配！非常感谢！

【解决方案2】：

所以如果你只想检查 is_streaming 的值不需要使用过滤器，最好使用 ngIf 来执行此操作，请看以下CodePen：

我将一个值切换为 false 来测试它。 ng-if 语法：

    <span ng-if"expression">display what you need </span>

【讨论】：