AngularJS显示分层数据 [英] AngularJS displaying hierarchical data

问题描述

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

I'm trying to display a list of data in a hierarchical view. My data looks something like this:

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看起来像:

My HTML looks like:

<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的子项?

The filter isn't working where I'm trying to filter on the inner controller with the outer controller. I'm getting both children displayed below each parent. How can I get it so the parent is displayed, and only the children are displayed where the childs model_parent_id equals the model_id of the parent?

推荐答案

虽然我不确定是否可以使用过滤器来实现此目的，但是显示嵌套数据的通常方法是重新组织数据结构以反映出什么您要显示.

While I'm not sure whether there is a way to achieve this using filter, the normal way to display nested data is to reorganize the data structure to reflect what you want to display.

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显示它们

And then display them using nested 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.

Note: There is no need to use nested controllers, just one on the top layer should be enough. If you need to use some shared logic recursively, use a custom directive to replace the li.

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

To reorganize the data you can do either on the server side or client side. The following shows how to do in client side as we might not have the permission to change the server side 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);
        }
    }
});

这篇关于AngularJS显示分层数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！