0

this is my controller :

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "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'));
        }
});

and this is my view :

<label class="switch">
  <input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">111
</label>

<div class="row" ng-controller="listdata">
    <div ng-repeat="user in users|filter:queue111">
       <p> {{user.name}} {{user.phone}}</p>
    </div>
</div>

When I start the app all the four users from the users data array are displayed. When I click on the filter checkbox, it displays the users who have a queue with a number 111. but it also displays the user pravin as it contains a phone number 7411173737 which contains 111. I want this filter to only display records whose queue number matches with 111 and not with any other fields like the phone number here. So the filter should only display records where the queue number is 111.

What I have done till now :

I have come up with a custom function $scope.filter111 as shown in the code above which returns only those users who have a queue number as 111. I want to use this function as a filter when the checkbox is checked. If I directly do ng-repeat="user in users|filter:filter111" it only displays records with queue number 111(i.e only 3 records) when the app starts(all the four records should be displayed when app starts). So I want this function to be fired only when I check the checkbox and apply it as a filter. I was think of something like this :

<input ng-true-value="'filter111'" ng-false-value='' type="checkbox" ng-model="queue111">111

but it's not working this way. How do I achieve this?

9
  • ng-repeat="user in users|filter:{name:queue111"} Commented Dec 6, 2018 at 6:15
  • will this execute the filter111 function? Commented Dec 6, 2018 at 6:19
  • Do not use custom filter, i suggest use exact match, ng-repeat="user in users|filter:{name:queue111"}:true Commented Dec 6, 2018 at 6:39
  • not working for me. as i want to display only the objects where the queue number is 111 Commented Dec 6, 2018 at 6:41
  • jsfiddle.net/sachinkk/kw8rysc5/4 Commented Dec 6, 2018 at 7:08

1 Answer 1

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'));
        }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">

<label class="switch">
  <input type="checkbox" ng-model="queue111">111
</label>


<div class="row" ng-controller="listdata">

  <div ng-repeat="user in users|filter: queue111? filter111: ''">
    <p> {{user.name}} {{user.phone}}</p>
  </div>
</div>

</div>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.