来自json数据的数组中的AngularJS过滤器数组

Question

我从JSON调用的数据非常简单。

我想过滤事件ID为13的所有数据

我的json来自[...] $scope.things = things

[
    {
     "id":"1",
     "title":"title1",
     "events":[
               {"id":"11",
                "events11"}, 
               {"id":"12",
                "events12"}
               ]
   },{
    "id":"2",
    "title":"title2",
    "events":[
              {"id":"11",
               "events11"}, 
              {"id":"13",
               "events13"}
             ]
  }
]

我尝试显示：

 <ion-item collection-repeat="thing in things | filter:{events.id:'13'}">
    {{thing.id}}
</ion-item>

Answer 1

首先需要纠正JSON格式，例如<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <!-- The definition of the Root Spring Container shared by all Servlets and Filters --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/root-context.xml</param-value> </context-param> <!-- Creates the Spring Container shared by all Servlets and Filters --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- Processes application requests --> <servlet> <servlet-name>appServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/servlet-context.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>appServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>，events11＆amp; events12应该是关键值对，例如events13，“事件”：“12”＆amp; "events": "11"。

然后你可以使用如下的深层过滤器。

<强>标记

"events": "13"

Plunkr here

Answer 2

在实例化范围变量时，您可以直接在控制器中过滤：

$scope.things = things.filter(obj => obj.id==='13');

Answer 3

您可以尝试使用ng-if和辅助函数：

 <ion-item collection-repeat="thing in things" ng-if="getEventInThing(thing, '13')">
    {{thing.id}}
</ion-item>

以下函数将返回具有给定id的事件（如果存在）：

$scope.getEventInThing = function(thing, eventId) {
 return thing.events.find(function(event) {
  return event.id===eventId;
 });
}

Answer 4

 <ion-item collection-repeat="thing in things">
    <span ng-repeat="event in thing.events" ng-if="event.id='13'"
        {{thing.id}}
 </ion-item>

基本上是两个循环，内部循环使用ng-if来检查偶数的id是否为13。