Question

如下所示，我的JSON格式数据文件。

您还可以看到有一个名为 servers 的根对象，其中包含两个数组。

此阵列中还有另一个名为 players 的数组。

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"
    }
]}

在我的网站上，我使用来自Angular的http（本地为临时）从外部URL加载此文件。

要显示来自数组[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（未选中不应列出数组[0]）
服务器2（未选中不应列出数组[1]）
玩家（未选中不应列出admin：false）
管理员（未选中不应列出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

我不知道该怎么做。我试图创建一个自定义过滤器，但没有用。

或者如果您了解更好的方法，请在此处发布。

Answer 1

我使用@VSO，您需要将服务器添加到播放器对象以在服务器上进行过滤。

我将此服务器属性添加到播放器对象，然后根据您的要求创建自定义过滤器。它确实有效，但它不是非常漂亮，但应该让你很好地了解如何为自定义过滤器构建事物来操纵数据。

如果您有任何疑问，请告诉我们。）

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

我默认打开了server1，server2，admin和player。您可以在以下对象中进行调整：

$scope.cnrFilterObj = {
  admin: true,
  players: true,
  server1: true,
  server2: true
};

Answer 2

要么我不明白这个问题，要么就是错误的方式。您无法在不知道玩家来自哪个服务器的阵列上按服务器过滤（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>

docs

AngularJS - 多维数组的自定义过滤器

2 个答案: