I'm dealing with an array of objects that have a boolean property, and I need to create a three-stage drop-down menu. This menu should allow users to view all items, only active items (those with the property set to true), or only trashed items (those with the property set to false). The default view upon page load should display only active items. However, when I try to switch between views using the drop-down menu, all values disappear. How can I resolve this issue?
Plunkr link
Here is my JS code:
var app = angular.module('plunker', []);
app.controller('FilterController',function($scope){
$scope.data = [{
name: 'darrin',
markedForDelete:true
},{
name: 'megan',
markedForDelete: true
},{
name: 'kim',
markedForDelete:false
},{
name: 'winky',
markedForDelete: false
}];
//show all should show both true and false
//show active should only show true
//show trash should only show false
$scope.filterOptions = [{
name: 'Show all'
},{
name: 'Show active'
},{
name: 'Show trash'
}];
$scope.customFilter = function(data){
if(data.markedForDelete){
return true;
}
if(!data.markedForDelete){
return false;
}
}
$scope.name = "Darrin";
})
And here is the HTML code:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f4fbf2e0f9f4e7bbffe6d5a4bba5bbed">[email protected]</a>" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="FilterController">
<input type="text" ng-model="searchText" />
<select ng-model="filterOptions" ng-options="f.name for f in filterOptions"></select>
<div ng-repeat="d in data | filter:customFilter ">{{d.name}}</div>
</div>
</body>
</html>
I'm looking for suggestions on the best way to handle this situation, as well as insight into why changing the drop-down selection results in all values disappearing.