Javascript 如何根据真假条件过滤ng重复数据_Javascript_Html_Angularjs_Angularjs Directive

Javascript 如何根据真假条件过滤ng重复数据

javascript html angularjs

Javascript 如何根据真假条件过滤ng重复数据,javascript,html,angularjs,angularjs-directive,Javascript,Html,Angularjs,Angularjs Directive,对不起，如果这个问题以前已经解决了，但是我找不到一个答案我试图根据单选按钮上的选择对ng repeat进行排序，但是我根本不知道如何在ng repeat中隐藏和显示项目例如： html: 现在，这只是一个示例，我还没有测试这段代码，但它在我的实际代码中起作用。我只想知道，假设数据包含一个状态变量，该变量为false或true，如果选择offline单选按钮，如何显示所有（false和true）以及如何过滤掉true 希望这足够清楚，谢谢为此，可以使用ng if指令 ng if指令删除或

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

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

例如：

html:

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

希望这足够清楚，谢谢

为此，可以使用

ng if

指令

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


待办事项
全部的
离线
在线 的
{{channel.name}


全部的
离线
{{channel.name}
{{channel.name}

您可以为此使用过滤器，如果“全部”表示第一个div将显示，如果单击“脱机”表示第二个div将显示状态true，如果您要更改状态，也可以更改过滤器值。首先，您需要向单选按钮添加

ng model

指令和

value

属性。该值将存储在

main.selectedFilter

变量中（以后可在过滤器中使用）

HTML:

{{channel.name}}

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

<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>

channelArray = [];
pushStreams();

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

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

<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>

  <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>

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);
  }

});