AngularJS 显示分层数据

Question

我正在尝试在分层视图中显示数据列表。我的数据看起来像这样：

items:[
  {
    "model_id": "1",
    "model_type_id": "1",
    "name": "Parent 1",
    "model_parent_id": ""
  },
  {
    "model_id": "2",
    "model_type_id": "1",
    "name": "Parent 2",
    "model_parent_id": ""
  },
  {
    "model_id": "3",
    "model_type_id": "2",
    "name": "Child 1",
    "model_parent_id": "1"
  },
  {
    "model_id": "4",
    "model_type_id": "2",
    "name": "Child 2",
    "model_parent_id": "2"
  }
]

我的控制器看起来像：

myApp.controller('ModelController', ['$scope', 'ModelFactory',
    function ($scope, ModelFactory) {

        $scope.init = function (id) {
            $scope.brandId = id;
            getModels($scope.brandId);
        };

        function getModels(brandId) {

            ModelFactory.GetModels(brandId)
                .success(function (mdls) {
                    $scope.models = mdls;
                    console.log($scope.mdls);
                })
                .error(function (error) {
                    $scope.status = 'Unable to load model data: ' + error.message;
                    console.log($scope.status);
                });
        };
    }
]);

我的 HTML 看起来像：

<div ng-controller="ModelController" ng-init="init(brand.ID)">
    <ul ng-sortable class="block__list block__list_words">
        <li ng-repeat="model in models | filter: {model_type_id:1} ">{{model.model_name}} - {{model.model_id}}

            <div ng-controller="ModelController" ng-init="init(brand.ID)">
                <ul ng-sortable class="block__list block__list_words">
                    <li ng-repeat="m in models | filter: {model_type_id:2} | filter:{model_parent_id:model.model_id}">
                        {{m.model_name}} - {{m.model_parent_id}}
                    </li>
                </ul>
            </div>

        </li>
    </ul>
</div>

当我尝试使用外部控制器对内部控制器进行过滤时，过滤器不起作用。我将两个孩子显示在每个父母的下方。如何才能显示父级，并且仅显示子级 model_parent_id 等于父级 model_id 的子级？

Answer 1

虽然我不确定是否有办法使用过滤器来实现此目的，但显示嵌套数据的正常方法是重新组织数据结构以反映您想要显示的内容。

items:[
  {
    "model_id": "1",
    "model_type_id": "1",
    "name": "Parent 1",
    "children": [{
      "model_id": "3",
      "model_type_id": "2",
      "name": "Child 1"
    }]
  },
  {
    "model_id": "2",
    "model_type_id": "1",
    "name": "Parent 2",
    "children": [{
      "model_id": "3",
      "model_type_id": "2",
      "name": "Child 2"
    }]
  }
]

然后使用嵌套 ng-repeat 显示它们

<ul>
  <li ng-repeat="parent in items">
    {{parent.name}} - {{parent.model_id}}
    <ul>
      <li ng-repeat="child in parent.children">
        {{child.name}} - {{child.model_id}}
      </li>
    </ul>
  </li>
</ul>

注意：不需要使用嵌套控制器，只需顶层一个就足够了。如果您需要递归地使用某些共享逻辑，请使用自定义指令来替换 li。

要重新组织数据，您可以在服务器端或客户端执行。下面展示了如何在客户端进行操作，因为我们可能没有更改服务器端 API 的权限。

$scope.data = [];
angular.forEach(items, function(item) {
    if (item.model_parent_id == "") {
        $scope.data.push(item);
    }  
});

// add all parents first in case some children comes before parent
angular.forEach(items, function(item) {
    if (item.model_parent_id == "") continue;

    // search for parent
    angular.forEach($scope.data, function(parent) {
        if (parent.model_id == item.model_parent_id) {
            if (!parent.children) parent.children = [];
            parent.children.push(item);
        }
    }
});