AngularJS

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]）
玩家（未选中不应列出管理员：false）
管理员（未选中不应列出管理员：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

我不知道该怎么做。我尝试创建自定义过滤器，但没有成功。

或者如果你知道更好的方法请post在这里

Answer 1

要么是我没看懂问题，要么是你的思路不对。您无法在不知道玩家来自哪个服务器的阵列上按服务器过滤 (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>

PLUNK

Answer 2

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

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

如果您有任何问题，请告诉我:)

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

我默认开启server1、server2、admin、player。您可以在以下对象中进行调整：

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

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

AngularJS - Custom filter for multidimensional array

javascript

arrays

json

angular-filters