iltro @angularjs com base nos valores correspondentes na matriz aninhada
Aqui está o meu código. Por favor, execute o script para ver como ele funciona:
var app = angular.module('myApp', []);
app.controller('listdata', function($scope, $http) {
var data = [{
"name": "John",
"queue": [{
"number": "456",
"status": "Unavailable"
},
{
"number": "111",
"status": "Unavailable"
},
{
"number": "201",
"status": "Paused"
}],
"phone": "7411173737"
},
{
"name": "George",
"queue": [{
"number": "111",
"status": "Paused"
},
{
"number": "456",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "Hilary",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "Edmond",
"queue": [{
"number": "665",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
$scope.a = [];
$scope.users = [];
for(i=0;i<data.length;i++){
for(j=0;j<data[i].queue.length;j++){
if(data[i].queue[j].number == 111 || data[i].queue[j].number == 456){
$scope.a.push(data[i]);
}
}
}
$scope.users = $scope.a;
//console.log($scope.users);
$scope.filter111 = function (user) {
return (user.queue.find(({number}) => number === '111'));
}
$scope.filter456 = function (user) {
return (user.queue.find(({number}) => number === '456'));
}
});
app.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/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>
<label class="switch">
<input type="checkbox" ng-true-value='"Paused"' ng-false-value='' ng-model="paused">Paused
</label>
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter: queue111? filter111: ''|unique:'name'|filter: queue456? filter456: ''|filter: paused track by $index">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
</div>
No código acima, minha matriz de dados contém objetos com o nome de um usuário, seu número de telefone e a fila de chamadas à qual ele pertenc
Tenho quatro filas de chamadas 111.456.201 e 665, respectivament
m usuário pode estar em qualquer número de filas de chamadas. Eu filtrei os dados no controlador para mostrar apenas os usuários que pertencem à fila 111 ou à fila 456 no front-en
Então, no meu código, o usuário Edmond pertence à fila 665, portanto, seus detalhes não são exibidos no front-end. Os outros três usuários pertencem a 111, 456 ou ambos, portanto, seus detalhes são mostrados no painel do usuári
Em seguida, o filtro 111 mostra apenas os usuários que pertencem à fila 111. o filtro 456 mostra apenas os usuários que pertencem à fila 456.
Agora, um usuário tem um status para todas as filas. O status pode ser qualquer coisa comoUnavailable
, Paused
etc.
Eu tenho um filtro chamadoPaused
no front-end, como mostrado no código, e esse filtro deve gerar apenas aqueles usuários cujo status seja Pausado apenas na fila 111 ou na 456. Não deve gerar saída para o usuário se o status dele não estiver em pausa em 111 ou 456.
Quando clico noPaused
filter exibe o nome John e George. Essa saída está realmente errada porque eu quero exibir apenas aqueles cujo status é Pausado na fila 111 ou 456. Portanto, na saída, o resultado para George está correto, pois seu status é Pausado na fila 456, mas para John a saída está errada, pois ele não está pausado na fila 111 ou 456. Ele parou na fila 201 e ainda está sendo exibido por o filtro em pausa que não é a saída esperada.
Saída esperada é que ele só deve exibir dados para George, pois ele realmente pertence a uma das duas filas (111 ou 456) e seu status é pausado em uma das filas (111 ou 456) que estou exibindo no front-end quando Clico no filtro Pausado. Como eu faço isso