如何根据真实错误条件过滤ng-repeat数据
[英]How to filter ng-repeat data based on true false condition
问题描述
sorry if this has been solved before, but I can't find an asnwer to it. 
抱歉，如果以前已解决此问题，但我找不到解决方法。
I am trying to sort an ng-repeat according to the selection on radio buttons, but I simply can't figure how to hide and show the items in the ng-repeat. 我正在尝试根据单选按钮上的选择对ng-repeat进行排序，但是我根本无法弄清楚如何在ng-repeat中隐藏和显示项目。
An example: 一个例子：
html: 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: JavaScript的：
channelArray = [];
pushStreams();
function pushStreams(data) {
channelArray.push(data)
}
Now, this is just an example, and I haven't tested this code, but it works in my real code. 现在，这只是一个示例，我尚未测试此代码，但是它可以在我的实际代码中使用。 I just want to know, assuming the data contains a status variable that is either false a true, how to show all (both false and true) and how to filter out trues if I select the offline radio button. 我只想知道，假设数据包含一个为false或true的状态变量，如果我选择离线单选按钮，则如何显示全部（false和true）以及如何滤除true。
Hope this is clear enough, thanks! 希望这很清楚，谢谢！
3 个解决方案
解决方案1
3 已采纳 2017-02-21 10:20:48
For this , you can use ng-if directive. 为此，您可以使用ng-if指令。
The ng-if directive removes or recreates a portion of the DOM tree based on an {expression}.
<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>
解决方案2
1 2017-02-21 10:57:03
First you need to add ng-model directive's and value attributes to your radio buttons. 首先，您需要向单选按钮添加ng-model指令的和value属性。 The value will get stored in the main.selectedFilter variable (where it can be used in the filter later). 该值将存储在main.selectedFilter变量中（以后可以在过滤器中使用）。
HTML: 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: 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);
}
});
解决方案3
0 2017-02-21 10:32:26
<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>
you can use filters for that and if all means the first div will display and if you click on offline means the second div will display for the status true if you want to change the status the change the filter value also 您可以为此使用过滤器，如果全部表示第一个div将显示，如果您单击脱机则表示第二个div将显示为true（如果要更改状态），请同时更改过滤器值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.