How to filter ng-repeat data based on true false condition
Question
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.
An example:
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)
}
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.
Hope this is clear enough, thanks!
3 answers
solution1
3 ACCPTED 2017-02-21 10:20:48
For this , you can use ng-if directive.
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>
solution2
1 2017-02-21 10:57:03
First you need to add ng-model directive's and value attributes to your radio buttons. The value will get stored in the main.selectedFilter variable (where it can be used in the filter later).
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);
}
});
solution3
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.