如何按父ID过滤嵌套的ng-repeat?

时间:2016-07-15 10:35:01

标签: angularjs angularjs-filter

我有一个数组

lists = [{"id":"1234"},{"id":"5423"},{"id":"65342"}]

包含内容的数组:

contents = [{"id":"1","listId":"1234"},{"id":"2","listId":"5423"}]

如何在ng-repeat中为“list”过滤ng-repeat以获取“内容”,并通过content.listID等于list.id来过滤“内容”?

2 个答案:

答案 0 :(得分:2)

您可能应该在控制器中而不是在视图中执行此映射,但下面的示例将向您展示如何执行此操作。

(function() {
  'use strict';

  angular
    .module('exampleApp', [])
    .controller('ExampleController', ExampleController);

  function ExampleController() {
    var vm = this;
    vm.lists = [{
      "id": "1234"
    }, {
      "id": "5423"
    }, {
      "id": "65342"
    }]
    vm.contents = [{
      "id": "1",
      "listId": "1234"
    }, {
      "id": "2",
      "listId": "5423"
    }]
  }
  ExampleController.$inject = [];
})();
<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <div ng-repeat="item in vm.lists">
    <p ng-repeat="content in vm.contents | filter:{ listId: item.id }">Content ID: {{content.id}} Lists ID: {{item.id}}</p>
  </div>
</body>

</html>

答案 1 :(得分:1)


mkdir log
tensorboard --logdir=./log

您必须将父ID发送到子数组,并且将针对该父ID过滤子数组。 plnk为类似的例子。

问候。