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

AngularJS - Custom filter for multidimensional array

本文关键字：数组 过滤器 自定义 AngularJS      更新时间：2023-09-26

你可以看到下面是我的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加载这个文件(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(未选中的不应该列出数组[0])
  • 服务器2(未选中的不应该列出数组[1])
  • 玩家(未选中的不应该列出admin: false)
  • Admins (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

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

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

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

我将这个服务器属性添加到播放器对象中，然后根据您的要求创建一个自定义过滤器。它确实有效，但它不是非常漂亮，但应该让您对如何构建用于操作数据的自定义过滤器有一个很好的了解。

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

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

我默认打开了server1、server2、admin和player。你可以在下面的对象中进行调整:

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

要么是我没理解这个问题，要么是你用错了方法。你不可能在一个不知道玩家来自什么服务器(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>

恰好

相关文章：