AngularJS - 在给定要过滤的值数组的情况下,如何过滤“深”对象数组?

时间:2016-02-10 03:08:12

标签: angularjs filter

我正在尝试使用值数组

过滤我从HTTP GET端点获取的数据

filters = ['Full Time', 'LinkedIn', ...]

我要回复的响应的一般结构是一个对象数组,其中每个对象看起来像这样:

 {
    "preferences": {
      "jobType": {
        "type": "Full Time"
      }
    },
    "profile": {
      "additionalinfo": {
        "organization": [
          {
            "name": "Google"
          },
          {
             "name": "LinkedIn"
          }
        ],
        "university": [
           {
            "name": "UC Berkeley",
            "degrees": [ {"name": "Computer Engineering"}]
           }
      }
    }
  }

因此,如果我按[“Google”,“全职”]过滤,则应包含上述对象。

是否有内置过滤器来处理此问题?

我在编写自定义过滤器以处理如此严重嵌套的对象时遇到问题。

关于如何实现这一点的任何想法?

2 个答案:

答案 0 :(得分:0)

您可以使用内嵌filter,例如jsfiddle



var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
  $scope.data = [{
    "preferences": {
      "jobType": {
        "type": "Full Time"
      }
    },
    "profile": {
      "additionalinfo": {
        "organization": [{
          "name": "Google"
        }, {
          "name": "LinkedIn"
        }],
        "university": [{
          "name": "UC Berkeley",
          "degrees": [{
            "name": "Computer Engineering"
          }]
        }]
      }
    }
  }, {
    "preferences": {
      "jobType": {
        "type": "Remote"
      }
    },
    "profile": {
      "additionalinfo": {
        "organization": [{
          "name": "Yandex"
        }, {
          "name": "LinkedIn"
        }],
        "university": [{
          "name": "UC Berkeley",
          "degrees": [{
            "name": "Computer Engineering"
          }]
        }]
      }
    }
  }];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <h3>Jobs</h3> 
  <input ng-model="filterModelJobType" placeholder="filter jobType">
  <input ng-model="filterModelJob" placeholder="filter job">
  <table class="table table-striped table-bordered">
    <tbody>
      <tr ng-repeat="x in data|filter:{profile: {additionalinfo:{organization:{name:filterModelJob}}},preferences: {jobType:{type:filterModelJobType}}}">
        <td>{{ $index + 1 | number }}</td>
        <td class="text-center">{{ x.preferences.jobType.type }}</td>
        <td class="text-left">
          <div ng-repeat="org in x.profile.additionalinfo.organization">
            <hr> {{org.name}}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

最新版本的AngularJS

如果有嵌套对象,那么

var foo = $filter('filter')($scope.welcome, {
  additionalinfo: { name: 'google' }
});  

参考:GitHub issue