如何根据真实错误条件过滤ng-repeat数据
[英]How to filter ng-repeat data based on true false condition
问题描述
抱歉，如果以前已解决此问题，但我找不到解决方法。
我正在尝试根据单选按钮上的选择对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)
}
现在，这只是一个示例，我尚未测试此代码，但是它可以在我的实际代码中使用。 我只想知道，假设数据包含一个为false或true的状态变量，如果我选择离线单选按钮，则如何显示全部（false和true）以及如何滤除true。
希望这很清楚，谢谢！
3 个解决方案
解决方案1
3 已采纳 2017-02-21 10:20:48
为此，您可以使用ng-if指令。
ng-if指令会根据{expression}移除或重新建立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>
解决方案2
1 2017-02-21 10:57:03
首先，您需要向单选按钮添加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);
}
});
解决方案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>
您可以为此使用过滤器，如果全部表示第一个div将显示，如果您单击脱机则表示第二个div将显示为true（如果要更改状态），请同时更改过滤器值
根据父级ng-repeat过滤ng-repeat
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.