AngularJS - Пользовательский фильтр для многомерного массива

0

Как вы можете видеть ниже, это мой файл данных формата JSON.

Вы также можете увидеть, что есть корневой объект, называемый серверами, который содержит два массива.

В этом массиве есть еще один массив, называемый игроками.

data.json

{ "servers" : [ { "age" : 44,
        "mapname" : "Las Venturas",
        "num" : 1,
        "online" : true,
        "players" : [ { "admin" : false,
            "cop" : true,
            "id" : 2,
            "level" : 10,
            "name" : "MariusTudor77",
            "registered" : true,
            "since_connect" : 3545,
            "skill" : "Police Officer",
            "spawned" : true
            },
            { "admin" : false,
            "cop" : false,
            "id" : 3,
            "level" : 0,
            "name" : "bananasinpajamas",
            "registered" : true,
            "since_connect" : 6726,
            "skill" : "Hitman",
            "spawned" : true
            },
            { "admin" : false,
            "cop" : false,
            "id" : 4,
            "level" : 0,
            "name" : "Milka2005Hewew",
            "registered" : false,
            "since_connect" : 177,
            "skill" : "Pick Pocket",
            "spawned" : true
            }
        ],
        "worldtime" : "11:00"
    },
    { "age" : 44,
        "mapname" : "Los Santos",
        "num" : 2,
        "online" : true,
        "players" : [ { "admin" : false,
            "cop" : false,
            "id" : 0,
            "level" : 0,
            "name" : "[_tayyab_]",
            "registered" : true,
            "since_connect" : 4063,
            "skill" : "Car Jacker",
            "spawned" : true
            },
            { "admin" : false,
            "cop" : false,
            "id" : 2,
            "level" : 10,
            "name" : "furkan",
            "registered" : false,
            "since_connect" : 1750,
            "skill" : "Mechanic",
            "spawned" : true
            }
        ],
        "worldtime" : "11:00"
    }
]}

На моем сайте я загружаю этот файл из внешнего URL-адреса, используя http из Angular (local for temp).

Чтобы показать игроков из массива [0] и [1], я использую concat для их смешивания.

$http.get("api/players.php")
    .then(function (res) {

        vm.s1 = res.data.servers[0];
        vm.s2 = res.data.servers[1];

        vm.players = vm.s1.players.concat(vm.s2.players);

        vm.loading = false;
    });

Здесь моя петля, где я перечисляю этот vm.players.

<li ng-if="vm.players.length" ng-repeat="player in vm.players | filter: search | orderBy: 'name'">
    <a href="#">{{ player.name }} ({{ player.id }})</a>
</li>

На моем сайте у меня есть четыре флажка.

  • Сервер 1 (Unchecked не должен перечислять массив [0])
  • Сервер 2 (Unchecked не должен перечислять массив [1])
  • Игроки (Unchecked не должны перечислять admin: false)
  • Админы (Unchecked не должен указывать admin: true)
<input type="checkbox" ng-model="vm.checkbox.s1"> Server 1
<input type="checkbox" ng-model="vm.checkbox.s2"> Server 2
<input type="checkbox" ng-model="vm.checkbox.player"> Players
<input type="checkbox" ng-model="vm.checkbox.admin"> Admins

Я не знаю, как это сделать. Я попытался создать собственный фильтр, но не работал.

Или, если вы знаете лучший способ, разместите его здесь.

  • 0
    Пожалуйста, создайте поршень с некоторыми фиктивными данными
  • 0
    Здесь embed.plnkr.co/5iZk3f4jyZk3K6i8ebbp Увеличьте окно, чтобы увидеть боковую панель. Это отзывчиво.
Теги:
arrays
angular-filters

2 ответа

2
Лучший ответ

Я с @VSO, вам нужно будет добавить сервер к объекту игрока для фильтрации на сервере.

Я добавил это свойство сервера к объектам игрока, а затем создал специальный фильтр для ваших требований. Это определенно работает, но это не супер красиво, но должно дать вам хорошее представление о том, как структурировать вещи для настраиваемого фильтра для управления данными.

Дайте знать, если у вас появятся вопросы :)

https://embed.plnkr.co/2cY7ZGHiDaazjeafESMI/

По умолчанию я включил server1, server2, admin и player. Вы можете отрегулировать это в следующем объекте:

$scope.cnrFilterObj = {
  admin: true,
  players: true,
  server1: true,
  server2: true
};
Поделиться
  • 1
    Ты спас мне жизнь, спасибо. И спасибо VSO.
  • 1
    Хорошие вещи, ребята. Мне нравится это решение.
Показать ещё 5 комментариев
1

Или я не понимаю вопроса, или вы идете по нему неправильно. Вы не можете POSSIBLY фильтровать по серверу в массиве, который не знает, из какого сервера пришли игроки (vm.players). Если вы хотите согласовать массивы, назначьте каждому игроку сервер, из которого они пришли, заранее. Затем просто фильтруйте новое свойство player.serverNumber:

        vm.s1 = res.data.servers[0];
        vm.s2 = res.data.servers[1];

        vm.s1.players.forEach(function (player) {
            player.serverNumber = 1; 
        });

        vm.s2.players.forEach(function (player) {
            player.serverNumber = 2; 
        });

        vm.players = vm.s1.players.concat(vm.s2.players);

        vm.loading = false;

И вот ваш html с некоторыми изменениями. Попробуйте новый фильтр:

   <li ng-if="vm.players.length" ng-repeat="player in vm.players | filter: search | filter:{ serverNumber: 1}:true" | orderBy: 'name'">
                <a ng-click="vm.userInfo(player.name)" href="#" ng-if="player.admin" class="admin-icon">{{ player.name }} ({{ player.id }})</a>
                <a ng-click="vm.userInfo(player.name)" href="#" ng-if="!player.admin">{{ player.name }} ({{ player.id }}) ({{ player.serverNumber }})</a>
            </li>

шлепнуть

Поделиться
  • 0
    Спасибо, вы также можете показать пример для фильтра? Должен ли я переименовать флажки как vm.serverNumber или что-то вроде этого?
  • 0
    Эй, я только что добавил фильтр для вас. Я рекомендую установить флажок, просто включив фильтр. Определите значение фильтра так же, как и другой фильтр в переменной $ scope.vm, а затем переключайте его, когда флажок установлен или не установлен. Я не видел ваши флажки в планк. Дай мне знать, если тебе еще понадобится помощь.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню