фильтр angularjs с операцией «ИЛИ» над данными, когда у нас есть несколько фильтров - PullRequest
Новая
       40

фильтр angularjs с операцией «ИЛИ» над данными, когда у нас есть несколько фильтров

0 голосов
/ 06 декабря 2018

Я проверил другой вопрос, но они, похоже, не решили мою проблему.

Вот мой код: 

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

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    },
    {
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "priyanka",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "prerana",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];
   $scope.filter111 = function (user) {
            return (user.queue.find(({number}) => number === '111'));
        }
    $scope.filter456 = function (user) {
           return (user.queue.find(({number}) => number === '456'));
        }
});
<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>
<label class="switch">
  <input type="checkbox" ng-model="queue456">456
</label>

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

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

</div>
Я создал пользовательские функции $scope.filter111 и $scope.filter456 соответственно для фильтрации данных. В настоящее время, когда я нажимаю флажок 111, фильтр возвращает только запись, чья очередь имеет номер 111 и когдаЯ нажимаю флажок 456, фильтр возвращает только записи, чья очередь имеет номер 456. Это прекрасно работает.Когда я щелкаю оба фильтра, он отображает только тот объект, чья очередь имеет номера 111 и 456, т. Е. Здесь происходит операция И *.

Ожидаемый результат: я хочу, чтобы при нажатии на обафлажок должен отображать все записи из 111, а также 456. вместе, то есть операция ИЛИ.

Как мне это сделать?

1 Ответ

0 голосов
/ 06 декабря 2018

Вы можете попробовать создать собственный фильтр angularJS, обратившись к примеру w3schools.com и по этой ссылке (для лучшего понимания пользовательских фильтров).

В вашем случае пользовательский фильтр angularjs будет принимать 3 входа, то есть список, который вы хотите отфильтровать, и значение флажков queue111 и queue456.Выполните фильтрацию и возврат данных, предоставив необходимые условия, основанные на значении флажков внутри фильтра.

Это также уменьшает код, который вы используете в своем HTML для фильтрации внутри ng-repeat, с 

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

до 

<div ng-repeat="user in users|customFilter: queue111:queue456">
    <p> {{user.name}} {{user.phone}}</p>
  </div>

, где

  1. customFilter - это имя (может быть любым именем, при условии, что это имя приведено в качестве примера) создаваемого вами фильтра angularJS.
  2. users будет первым вводом по умолчанию для вашего пользовательского фильтра, а значения ваших флажков будут 2-м и 3-м входами соответственно.

Также было бы полезно, если бы выпредоставьте codepen / plunker демонстраций, чтобы люди могли легко отладить вашу проблему и найти решения.

...