Angularjs: Order and Filter by array intersect

Angularjs: Order and Filter by array intersect

本文关键字：by array intersect Filter and Order Angularjs      更新时间：2023-09-26

这是我的条件：我通过异步调用检索用户列表及其类别。

客户端可以选择类别。

现在，我必须只显示那些在自己的类别中从客户端中选择的用户，他们按照自己的类别与所选类别匹配的数量排序。

示例。（括号内的数字是ID）

User B - Cats: - (no one)
User C - Cats: [7]Cat7, [2]Cat2
User A - Cats: [1] Cat1, [2]Cat2, [5]Cat5

客户选择的猫：[2]、[1]、[8]

因此，在这里，用户B将不会出现，剩余的顺序是A（2个匹配），C（1个匹配）。

这是一个庞克，我不知道从哪里开始。

http://plnkr.co/edit/oNlD8T?p=preview

最好是在Angular中进行（以及如何进行？）或进行新的异步调用（观察所选的猫），然后服务器处理所有这些？（服务器端使用PHP，我不知道如何使用nodejs）

您可以将filter过滤器与自定义表达式function(value, index, array)一起使用，您可以将其与所选数组进行比较。

https://docs.angularjs.org/api/ng/filter/filter

另一种方法是使用lodash，它有_.some和_.intersection，这将使编写自定义表达式变得更容易。

https://lodash.com/docs#some
https://lodash.com/docs#intersection

您还可以为自己的filter(name, filterFactory)制作自定义过滤器：https://docs.angularjs.org/tutorial/step_09

我为您创建了一个plnkr.co/edit/nHVC5EbWYLarHnHR3LPQ？p=预览希望这对你的要求有所帮助。

我刚刚修改了现有的代码。添加了一个条件来检查数组的长度是否大于零ng show="user.cats.length>0"。

   <ul>
  <li ng-show="user.cats.length > 0"  ng-repeat="user in users">{{ user.name }} - <span ng-repeat="userCat in user.cats" style="margin-right:10px;"><strong>[{{ userCat.id }}]</strong> {{ userCat.label }}</span></li>
</ul>

还要注意，大于符号（>0）对于ng显示来说并不是真正必要的。它只是增加了解决方案的清晰度。

正如Alon Valadji建议的那样，我用ng show和ng if更新了plunker。检查这篇文章的角度性能ng-show与ng-if，并根据您的要求做出决定。

相关文章：