Angularjs Apply Custom Filter Only When Checkbox Is Checked

this is my controller : app.controller('listdata', function($scope, $http) { $scope.users = [{ 'name': 'pravin', 'queue': [{ 'number': '456', 'status': 'Una

Solution 1:

I fixed it like this by using the ternary operator in the filter:

var app = angular.module('myApp', []);

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    },
    {
        "number": "112",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "priyanka",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "prerana",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];
   $scope.filter111 = function (user) {
            return (user.queue.find(({number}) => number === '111'));
        }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script><divng-app="myApp"><labelclass="switch"><inputtype="checkbox"ng-model="queue111">111
</label><divclass="row"ng-controller="listdata"><divng-repeat="user in users|filter: queue111? filter111: ''"><p> {{user.name}} {{user.phone}}</p></div></div></div>