如何根据真假条件过滤 ng-repeat 数据答案

【问题标题】：How to filter ng-repeat data based on true false condition如何根据真假条件过滤 ng-repeat 数据
【发布时间】：2017-02-21 19:27:38
【问题描述】：

对不起，如果这个问题之前已经解决了，但我找不到答案。

我正在尝试根据单选按钮上的选择对 ng-repeat 进行排序，但我根本不知道如何隐藏和显示 ng-repeat 中的项目。

一个例子：

html:

<form>
 <label><input type="radio" name="generic" />all</label>
 <label><input type="radio" name="generic" />offline</label>
</form>

<div ng-repeat="channel in controller.channelArray>
 <div>{{channel.name}}</div>
</div>

javascript：

channelArray = [];
pushStreams();

function pushStreams(data) {
 channelArray.push(data)
}

现在，这只是一个示例，我还没有测试过这段代码，但它可以在我的真实代码中运行。我只想知道，假设数据包含一个为假或真的状态变量，如果我选择离线单选按钮，如何显示所有（假和真）以及如何过滤掉真。

希望这足够清楚，谢谢！

【问题讨论】：

<div ng-if="channel.status">{{channel.name}}</div>

标签： javascript html angularjs angularjs-directive

【解决方案1】：

为此，您可以使用ng-if 指令。

ng-if 指令删除或重新创建 DOM 树的一部分基于一个{表达式}。

<div ng-repeat="channel in channels">
     <div ng-if="validate(channel)">{{channel.name}}</div>
</div>

function TodoCtrl($scope) {
   $scope.check='All';
   $scope.channels=[{
     name:'a',
     status:true
   },{
     name:'b',
     status:false
   },{
     name:'c',
     status:false
   },{
      name:'d',
     status:true
   }];
   
   $scope.validate=function(channel){
      switch($scope.check){
        case 'All':
           return true;
        case 'Offline':
           return !channel.status;
        case 'Online':
           return channel.status;
      }
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl"> 
     <label><input type="radio" name="generic" ng-model="check" value="All" />all</label>
     <label><input type="radio" name="generic" ng-model="check" value="Offline" />offline</label>
     <label><input type="radio" name="generic" ng-model="check" value="Online" />online</label>
    <div ng-repeat="channel in channels">
         <div ng-if="validate(channel)">{{channel.name}}</div>
     </div>
  </div>
</div>

【讨论】：

感谢您的快速答复。啊，是的，但这似乎直接针对数据。我想根据单选按钮选择显示/隐藏，还是我误解了什么？
@MCMowgli，请看我的回答。
效果很好，只是添加了一个，如何检查第三个选项？全部，离线，在线？
举个例子，@MCMowgli。
与上面的示例相同，但只有第三个选项。所以它是全部显示，只显示离线和只显示在线。（对不起，我没有立即添加）

【解决方案2】：

<form>
<label><input type="radio" name="generic" ng-model="all" checked />all</label>
<label><input type="radio" name="generic" ng-model="offline" />offline</label>
</form>

<div ng-if="all" ng-repeat="channel in controller.channelArray">
<div>{{channel.name}}</div>
</div>

<div ng-if="offline" ng-repeat="channel in controller.channelArray | filter :{status:true}">
<div>{{channel.name}}</div>
</div>

您可以为此使用过滤器，如果 all 意味着第一个 div 将显示，如果您单击离线意味着第二个 div 将显示状态为 true 如果您想更改状态，也更改过滤器值

【讨论】：

【解决方案3】：

首先，您需要将ng-model 指令和value 属性添加到您的单选按钮。该值将存储在main.selectedFilter 变量中（稍后可以在过滤器中使用）。

HTML：

  <body ng-controller="MainCtrl as main">
    <form>
     <label><input type="radio" name="generic" ng-model="main.selectedFilter" value="All" />all</label>
     <label><input type="radio" name="generic" ng-model="main.selectedFilter" value="Offline" />Offline</label>
    </form>

    <div ng-repeat="channel in main.channelArray | filter : main.myFilterFunction ">
      <div>{{ channel.name }}</div>
    </div>
  </body>

JS：

app.controller('MainCtrl', function($scope) {

  var vm = this;

  vm.selectedFilter = "All";

  vm.channelArray = [
    {
      name:'Channel One',
      status:true
    },
    {
      name:'Channel Two',
      status:true
    },
    {
      name:'Channel Three',
      status:false
    },
    {
      name:'Channel Four',
      status:true
    }
 ];

  vm.myFilterFunction = function(value){
    return (vm.selectedFilter === "All") || (!value.status);
  }

});

Example Plunk

【讨论】：