如何根據真實錯誤條件過濾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.